CSS flex-wrap如何使高度不拉伸[重复]答案

【问题标题】：CSS flex-wrap how to make the height do not stretch [duplicate]CSS flex-wrap如何使高度不拉伸[重复]
【发布时间】：2019-11-21 19:23:03
【问题描述】：

box3, box1和box4, box6之间有很大的差距如何消除差距？所以每个box 都可以有动态高度吗？

.wrap {
  display: flex;
  align-items: baseline;
  align-content:flex-start;
  justify-content: space-between;
  flex-wrap: wrap; 
  background-color: lightblue;
}

.box {
  display: flex;
  background-color: tomato;
  box-sizing: border-box;
  border: 1px solid #C4C4C4;
  height: 100px;
  width: 45%;
  margin-top: 15px;
}

.box1, .box4 {
  height: 20px;
}

  <div class="wrap">
    <div class="box box1">box1</div>
    <div class="box box2">box2</div>
    <div class="box box3">box3</div>
    <div class="box box4">box4</div>
    <div class="box box5">box5</div>
    <div class="box box6">box6</div>
  </div>

这是所需的布局。谢谢

【问题讨论】：

您的问题令人困惑。您能否以更好的方式说明确切的问题？当前的问题是什么，您期望什么会有所帮助。

标签： css flexbox

【解决方案1】：

flex 的默认方向是行，当你使用flex-wrap: wrap 将溢出的元素向下推到另一行时，行高将默认始终等于该行的最高元素，这就是为什么你看到元素有那个差距。

如果您将 flex 方向更改为 column 并给 wrap 元素一个固定的高度，以便它将溢出的元素从上到下向右推，则可以做到这一点。

.wrap {
  /*Added these*/
  height: 300px;
  flex-direction: column;
  /*-----------*/
  display: flex;
  align-items: baseline;
  align-content: space-around;
  flex-wrap: wrap; 
  background-color: lightblue;

}

.box {
  display: flex;
  background-color: tomato;
  box-sizing: border-box;
  border: 1px solid #C4C4C4;
  height: 100px;
  width: 45%;
  margin-top: 15px;
}

.box1, .box5 {
  height: 20px;
}

  <div class="wrap">
    <div class="box box1">box1</div>
    <div class="box box2">box2</div>
    <div class="box box3">box3</div>
    <div class="box box4">box4</div>
    <div class="box box5">box5</div>
    <div class="box box6">box6</div>
  </div>

【讨论】：

【解决方案2】：

由于 FlexBox 将尝试将盒子排列成行，因此您必须创建两个单独的 FlexBox，并设置 flex-flow: column。不过，您可以使用大约相同数量的 CSS 来实现这种效果：

.outer{
    display: flex;
    padding: 15px 0;
    background-color: lightblue;
}

.wrap {
  display: flex;
  flex-flow: column;
  flex-grow: 1;
}

.wrap:nth-child(2){
   align-items: flex-end;
}

.box {
  background-color: tomato;
  box-sizing: border-box;
  border: 1px solid #C4C4C4;
  height: 100px;
  width: 90%;
  margin-top: 15px;
}

.box1, .box4{
  margin-top: 0;
}

.box1, .box5 {
  height: 20px;
}

<div class="outer">
    <div class="wrap">
        <div class="box box1">box1</div>
        <div class="box box2">box2</div>
        <div class="box box3">box3</div>
    </div>
    <div class="wrap">
        <div class="box box4">box4</div>
        <div class="box box5">box5</div>
        <div class="box box6">box6</div>
    </div>
</div>

【讨论】：

【解决方案3】：

您可以改用 CSS 网格布局，具体取决于您的浏览器支持要求。

CSS Grid 上的优秀资源：https://css-tricks.com/snippets/css/complete-guide-grid/

浏览器支持：https://caniuse.com/#feat=css-grid

.wrap {
  display: grid;
  background-color: lightblue;
  grid-template-columns: 50% 50%;
  grid-template-rows: repeat(14, 20px);
  background-color: lightblue;
}

.box {
  background-color: tomato;
  box-sizing: border-box;
  border: 1px solid #C4C4C4;
  height: 100px;
  width: 90%;
  margin-top: 15px;
}
.box1 {
  grid-row: 1/2;
}
.box2 {
  grid-row: 1/5;
}
.box3 {
  grid-row: 3/8;
}
.box4 {
  grid-row: 7/8;
}
.box5, .box6 {
  grid-row: 9/14;
}
.box1, .box4 {
  height: 20px;
}

  <div class="wrap">
    <div class="box box1">box1</div>
    <div class="box box2">box2</div>
    <div class="box box3">box3</div>
    <div class="box box4">box4</div>
    <div class="box box5">box5</div>
    <div class="box box6">box6</div>
  </div>

【讨论】：

【解决方案4】：

Flex 总是会创建一个网格，这就是您看到大空间的原因。 flex:row 或 flex:column 都不会达到您指定的顺序。 Flex 列将能够像 Ethan Vu 建议的那样实现您所追求的布局，但该解决方案中的主要警告是您可能不想要的强制固定高度容器。

如果您想要这样的布局并且不想要固定高度，那么您可以尝试使用 css columns 或使用 javascript 解决方案并使用 2 列 masonry layout。

【讨论】：