html 为什么Flex Wrap会忽略空白区域？

f4t66c6m 于 2023-06-20 发布在其他

关注(0)|答案(2)|浏览(123)

我试图创建一个方案，我有一个大的垂直div的2h高度与一个大的水平div旁边的第一个h的高度，然后在第二个h的高度，我想有另一个较小的div。我希望它看起来像这样：

但不幸的是，我所能做到的就是：

我不确定为什么第三个div被放置在第一个div下面而不是旁边。
不幸的是，我无法在我的实际案例中应用一些额外的规则：

我不能将任何div单独 Package 在另一个容器中
我不能使用绝对定位，因为在我的实际用例中，我是动态生成div的。

Here is the simple example I reproduced.

.container {
  display: flex;
  flex-wrap: wrap;
}

.first {
  background-color: #0afc12;
  flex-basis: 33%;
  height: 400px;
}

.second {
  background-color: #17cfe3;
  flex-basis: 66%;
  height: 200px;
}

.third {
  background-color: #fcba03;
  flex-basis: 33%;
  height: 200px;
}

<div class="container">
  <div class="first">a</div>
  <div class="second">b</div>
  <div class="third">c</div>
</div>

Html

来源：https://stackoverflow.com/questions/76466926/why-is-flex-wrap-ignoring-the-empty-space

2条答案

按热度按时间

axr492tv1#

.first被认为与.second在同一“行”上，而.third在第二个不相关的“行”上。
现在，你可以使用grid，它既漂亮又干净：

.container {
  /* a spans two rows, b spans two columns */
  /* dot means nothing occupies that cell. */
  grid-template-areas:
    'a b b'
    'a c .';
  height: 400px;
}

/* Set identifier for each */

.first {
  grid-area: a;
}

.second {
  grid-area: b;
}

.third {
  grid-area: c;
}

试试看：

.container {
  grid-template-areas:
    'a b b'
    'a c .';
  height: 400px;
}

.first {
  grid-area: a;
}

.second {
  grid-area: b;
}

.third {
  grid-area: c;
}

/* Original styles */

.container {
  display: grid;
}

.first {
  background-color: #0afc12;
}

.second {
  background-color: #17cfe3;
}

.third {
  background-color: #fcba03;
}

<div class="container">
  <div class="first">a</div>
  <div class="second">b</div>
  <div class="third">c</div>
</div>

赞(0）回复(0）举报 2023-06-20

zzlelutf2#

做了一些弹性参数的变化，尝试..

.container {
  height: 500px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

.first {
  background-color: #0afc12;
  height: 500px;
}

.second {
  background-color: #17cfe3;
  flex-basis: 50%;
}

.third {
  background-color: #fcba03;
  flex-basis: 50%;
  width: 300px;
}

<div class="container">
  <div class="first">a</div>
  <div class="second">b</div>
  <div class="third">c</div>
</div>

可以随意更改任何值，使用的方法是flex-column

赞(0）回复(0）举报 2023-06-20

我来回答

html 为什么Flex Wrap会忽略空白区域？

2条答案

相关问题

热门标签

最新问答