布局模板 - Flexbox答案

【问题标题】：Layout Template - Flexbox布局模板 - Flexbox
【发布时间】：2016-09-01 11:11:28
【问题描述】：

我对 flex-box 还很陌生，但感觉好像我很了解它。但是，我似乎无法掌握我目前正在处理的这个布局，我有我想要的正确尺寸的图像。

我将它与 Flexbox 属性结合使用。我的想法是拥有一个 100% 宽度的导航栏。 1 个 div 内部有 3 个 div 并将外部 div 设置为 flex-direction: row;等等...然后在一个 div 中使用另一组 3 个 div 重复此步骤。

它似乎适用于大型浏览器，但是当我缩放/调整窗口宽度时，图像变得越来越小。这是我想要的，但我也希望它与窗口相关。

首先，我什至不确定这是否可行，但我已经尝试了各种不同的尝试来让它发挥作用，我正在努力想出一个解决方案。

我确实考虑过使用媒体查询来更改各种不同屏幕尺寸的布局，但似乎是一个费力的过程（我并不懒惰，但如上所述，必须有更直观的方法来做到这一点）。

第一张图片在 1600 像素高度以上的浏览器上看起来不错（必须缩小图片，这就是为什么看起来有点拉伸）；

但是任何低于它开始的东西都会显示空白；

<body>
<div layout="column" layout-fill>
        <div class="md-toolbar-tools">
            <span flex></span>
            <md-button style="font-size: 1.5vw;">
                PORTLAND.&nbsp;<md-icon md-font-icon="reorder" style="color:       white; font-size: 2vw;">reorder</md-icon>
            </md-button>
        </div>
    </md-toolbar>
</div>

<div style="display: flex; flex-direction: row; justify-content: flex-start;     flex-wrap: nowrap; height: 100%; width: 100%; font-size: 0; overflow-y: hidden;     ">
    <div style="height: 50%; width: 25%; flex-wrap: wrap;">
        <img class="resize" style="height: 100%; width: 100%;" ng-    src="/assets/01_TILE.jpg" />
    </div>
    <div style="height: 50%; width: 25%; flex-wrap: wrap;">
        <img class="resize" style="height: 100%; width: 100%;" ng-    src="/assets/02_TILE.jpg" />
    </div>
    <div style="height: 50%; width: 50%; flex-wrap: nowrap;">
        <img class="resize" style="height: 100%; width: 100%;" ng-    src="/assets/03_TILE.jpg" />
    </div>
</div>
<div style="display: flex; flex-direction: row; justify-content: flex-start;     height: 100%; width: 100%; font-size: 0;">
    <div style="height: 50%; width: 50%;">
        <img style="height: 100%; width: 100%;" ng-src="/assets/04_TILE.jpg" />
    </div>
    <div style="height: 50%; width: 25%;">
        <img style="height: 100%; width: 100%;" ng-src="/assets/05_TILE.jpg" />
    </div>
    <div style="height: 50%; width: 25%;">
        <img style="height: 100%; width: 100%;" ng-src="/assets/06_TILE.jpg" />
    </div>
</div>
</body>

我已经发布了我的大部分 CSS（内联，所以我可以提出问题）如果您有任何问题或需要更多代码，请告诉我，我会发布它。

任何帮助都会很棒，因为我很难找到解决方案。

亲切的问候，

【问题讨论】：

任何帮助将不胜感激。谢谢！
您在使用 Angular 材质吗？如果是，则 Flexbox 已经包含在内：material.angularjs.org/latest/layout/introduction
嘿哈维尔，是的，我正在使用 Angular 材料。我知道它包括 flex-box。仍然不知道如何使这种布局起作用。

标签： css layout flexbox

【解决方案1】：

在您的 HTML 代码中，我错过了 <md-toolbar>tag
我不是角度材料方面最大的专家，要调整你必须阅读文档：https://material.angularjs.org/latest/layout/children
据我了解，您需要两行，每行的屏幕高度为 50%。
HTML 代码：

<div layout="row">
  <div flex="25"> 
  </div>
  <div flex="25">
  </div>
  <div flex="50">
  </div>
</div>
<div layout="row">
  <div flex="50">
  </div>
  <div flex="25">
  </div>
  <div flex="25">
  </div>
</div>

在您的 CSS 代码中添加：

div.layout-row {
    height:50%;
}

它使你的行占据屏幕的 50%，我希望它有所帮助。

【讨论】：