Question

我的布局中有一个row容器和三个100％宽度的列。

他们按预期堆叠在一起，但是当我给第一个小高度时，我有一个我无法解释的行为。

下一个div似乎没有尊重这个高度。

我希望黄色的div可以覆盖淡蓝色区域，我不明白它为什么会出现在那里。

＆＃13;

* {
  outline: 1px solid red
}

.row {
  background-color: lightblue;
  height: 200px;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.col {
  flex-basis: 100%;
  max-width: 100%;
}

.line {
  background-color: blue;
  height: 10px;
}

.second {
  background-color: #EEE8AA;
}

＆＃13;

<div class="row">
  <div class="col line">
    
  </div>
  <div class="col second">
    hello
  </div>
  <div class="col second">
    goodbye
  </div>
</div>

＆＃13;

Here is a live demo (fiddle).

Answer 1

我认为发生了什么，因为它是弹性row，每个弹性项目的高度将是相同的 - 或者每个项目将垂直占据的空间将是同样，即使您为其中一个项目指定了不同的高度。因此，由于您已将每个设置为flex-basis: 100%，因此它们将均匀地占据父级的整个高度。第一个元素是深蓝色区域+浅蓝色区域（1/3），另外两个也是1/3。所以浅蓝色+深蓝色是flex-basis: 100%（1/3）。

如果您将flex-basis替换为flex-grow: 1，则更容易构思，然后您可以横向看到相同的行为https://jsfiddle.net/mLzm2y7y/3/

Answer 2

Flex容器的初始设置为align-content: stretch。这意味着，在行方向容器中，容器的高度将在行之间均匀分布。

在您的情况下，您有三条柔性线。每条线在垂直空间中占有相等的份额。

如果您切换到align-content: flex-start，则会将行打包在顶部。

＆＃13;

.row {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start; /* NEW */
  background-color: lightblue;
  height: 200px;
  box-sizing: border-box;
}

.col {
  flex-basis: 100%;
  max-width: 100%;
}

.line {
  background-color: blue;
  height: 10px;

}

.second {
  background-color: #EEE8AA;
}

* {
  outline: 1px solid red
}

＆＃13;

<div class="row">
  <div class="col line"></div>
  <div class="col second">hello</div>
  <div class="col second">goodbye</div>
</div>

＆＃13;

快速简便的解决方案是使用flex-direction: column：

＆＃13;

.row {
  display: flex;
  flex-direction: column;
  background-color: lightblue;
  height: 200px;
  box-sizing: border-box;
}

.col {
  flex: 1; /* lines will consume whatever vertical space is available */
  width: 100%;
  max-width: 100%;
}

.line {
  flex: 0 0 10px;
  background-color: blue;
}

.second {
  background-color: #EEE8AA;
}

* {
  outline: 1px solid red
}

＆＃13;

<div class="row">
  <div class="col line"></div>
  <div class="col second">hello</div>
  <div class="col second">goodbye</div>
</div>

＆＃13;

在此处了解有关主轴的柔性对齐的更多信息：

In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

在此处了解有关十字轴的柔性对齐的更多信息：

How does flex-wrap work with align-self, align-items and align-content?

Answer 3

删除＆＃34; .line {高度：10px}＆＃34;你的概率会解决。

Div不会堆叠在彼此之下或不接受高度

3 个答案: