离子响应式多容器网格布局

Question

>问题

我想创建一个 3 个容器，一个是占据大部分屏幕的主要大容器，其他容器几乎位于左侧和底部的热栏。 像这样的东西。

我尝试过什么

我已经尝试过离子网格，但它似乎不适用于响应式布局，因为我认为也许有更好的方法可以做到这一点？

Answer 1

您可以在这些情况下使用 flexbox，它是一组本机 css 命令。

在此处阅读更多相关信息 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

这是一个像您的图像这样的布局的快速示例，您可以调整它以达到您的目的，并使用您对 flexbox 的研究来扩展它。

.html

<div id="main-wrapper">
<div id="side-bar"></div>
<div id="other-content">
<div id="main-content"></div>
<div id="footer"></div>
</div>
</div>

.css

#main-wrapper {
width: 100%;
height: 300px;
display: flex;  
align-items: stretch;
background-color: grey;
padding: 10px;
box-sizing: border-box;
}
#side-bar{
background-color: blue;
width: 90px;
}
#other-content {
flex: 1;
display: flex;
flex-direction: column;
align-items: stretch;
margin-left: 10px;
}
#main-content {
flex: 1;
background-color: blue;
margin-bottom: 10px;
}
#footer {
height: 90px;
background-color: blue;
}

这里有一个小提琴来帮助你开始。

https://jsfiddle.net/7wj31ucb/69/