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

Question

问题

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

我试过的

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

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;
}

这里有一个 fiddle 可以帮助您入门。

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

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

Ionic responsive multi container grid layout

grid

ionic-framework

responsive

ion-grid

问题

我试过的