为什么我的第一个 div 在窗口外？答案

【问题标题】：Why is my first div outside of the window?为什么我的第一个 div 在窗口外？
【发布时间】：2020-05-17 09:46:13
【问题描述】：

我只是在尝试不同屏幕尺寸的 FlexLayout。下面的 3 个框/div 在大显示屏上应该并排放置，如果缩小，它们应该在彼此上方。但是我的顶部 div 在我的窗口之外，我不想要那个.. 我该如何解决这个问题？

<div class="container" fxLayout="row" fxLayout.lt-md="column" fxLayoutAlign="space-around center">
  <div class="asd" [style.background-color]="'black'"></div>
  <div class="asd" [style.background-color]="'green'"></div>
  <div class="asd" [style.background-color]="'blue'"></div>
</div>

.asd {
  min-height: 500px;
  min-width: 400px;
}

.container {
  height: 100%;
}

【问题讨论】：

min-width: 400px;?您可以考虑改用 flex 子属性和基于百分比的宽度。

标签： html css angular responsive angular-flex-layout

【解决方案1】：

除非您将flex-wrap: wrap 与min-width 或flex-basis 声明一起使用，否则Flex 元素不会堆叠。

基本上，如果行中的 flex 元素的数量需要小于它们的最小宽度，它们将换行到下一行。

.flexContainer {
   display:flex;
   max-width: 80%;
   margin: 20px;
   
   justify-content: space-between;
   flex-wrap: wrap;
}

.flexItem {
   background: #dddddd;
   padding: 20px;
   min-width: 200px;
   margin: 0 10px 10px 0;
}

<div class="flexContainer">
  <div class="flexItem">Flex</div>
  <div class="flexItem">Flex</div>
  <div class="flexItem">Flex</div>
  <div class="flexItem">Flex</div>
</div>

【讨论】：