Question

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>

这是所需的布局。谢谢

Answer 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>

Answer 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>

Answer 3

您可以根据浏览器支持要求使用CSS网格布局。

CSS网格上的丰富资源：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>

Answer 4

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

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

CSS flex-wrap如何使高度不拉伸

4 个答案: