【问题标题】：Ionic responsive multi container grid layout离子响应式多容器网格布局
【发布时间】：2018-08-14 21:40:14
【问题描述】：

问题

我想创建一个 3 个容器，一个是主要的大容器，它将占据大部分屏幕，其他的几乎位于左侧和底部的快捷栏。类似this。

我尝试过的

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

【问题讨论】：

标签： ionic-framework grid responsive ion-grid

【解决方案1】：

你可以在这些情况下使用 flexbox，它是一组原生 css 命令。

这是一个像图像这样的布局的快速示例，您可以对其进行调整以满足您的目的，并使用您对 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/

【讨论】：