html - 了解 flex : wrap with align-items: stretch

Question

如果您运行以下代码段，您可以看到 height flexbox 中的两行container是不同的。有人可以解释一下吗？

如果您发表评论 A线 (= 从 height 项中删除显式 flexbox)两行在 height 中变得相等.我不明白为什么？

Here是同一个片段的 JSfiddle，如果方便的话。

*{
  color: blue;
  font-size: 22px;
}
.box1 {
  width: 50px;
  background-color: black;
  border: 1px solid blue;
}

.box2 {
  width: 50px;
  background-color: red;
  border: 1px solid blue;
}

.box3 {
  width: 50px;
  height: 30px;/*Line A: comment this and both rows will have same height*/
  background-color: yellow;
  border: 1px solid blue;
}

.container {
  display: flex;
  width: 160px;
  height: 500px;
  border: 1px solid red;
  align-items: stretch;
  flex-wrap:wrap;
}

<div class="container">
    <div class="box1">.box1</div>
    <div class="box2">.box2</div>
    <div class="box3">.box3</div>
    <div class="box1">.box1</div>
    <div class="box2">.box2</div>
</div>

我的理解:

我找不到 flex-wrap: wrap 的任何详细解释.网站如 MDN和 CSS-tricks就说当 wrap被应用的元素会有 width = flex-basis当一个 row元素完成，元素将移动到下一个 flexbox row .但是这些 row的对齐方式是什么？ s 内 flexbox container ?

我的理解是:(假设 flex-direction: row 并且允许包装)如果元素占用多个 row , 每个 row将具有相同的高度( = flexbox_container_height/row_count )并且每个 row充当 flexbox container .所以如果我申请一个属性 flex-items:center ，元素将在这些行中的每一行内居中。

我的理解正确吗？

Answer 1

这里的问题不是flex-wrap或 align-items或 align-content (至少不是直接的)。

真正的问题是 box-sizing .

重点:

free space !== length 

box-sizing属性适用于长度，包括 height , width和 flex-basis .
box-sizing属性不适用于可用空间，因此被 align-items 忽略。 , flex-grow , justify-content , fr以及管理可用空间的其他属性和功能。
box-sizing box-sizing属性有两个值:

content-box (默认值)

border-box

与 content-box ，您定义的任何长度都将不包括填充或边框。

与 border-box 、内边距和边框被计入您的长度计算中。

在提及 CSS Box Model 时考虑这些术语.



来源: W3C

请注意 box-sizing不提供 padding-box或 margin-box值。边距总是单独添加。

你的代码

这是您的 flex 容器:

.container {
   display: flex;
   flex-wrap: wrap;  
   align-items: stretch; /* default setting */
   width: 160px;
   height: 500px;
   border: 1px solid red;
}

在您的 flex 元素中，让我们删除 box3一会儿。这是定义高度为 30px 的元素。

.container {
  display: flex;
  flex-wrap: wrap;  
  align-items: stretch; /* default setting */  
  width: 160px;
  height: 500px;
  border: 1px solid red;
}

.box3 { height: 30px; }


.box1 { background-color: gray;   }
.box2 { background-color: orange; }
.box3 { background-color: yellow; }

.container > div {
  flex: 0 0 50px;
  border: 1px solid blue;
}

* {
  color: blue;
  font-size: 22px;
}

<div class="container">
    <div class="box1">box1</div>
    <div class="box2">box2</div>
    <!--<div class="box3">box3</div>-->
    <div class="box1">box1</div>
    <div class="box2">box2</div>
</div>

主要观察:

现在两行的高度都是 250 像素。

即使顶部/底部边框有 4px，并且 box-sizing默认为 content-box ，高度还是250px。

边框被忽略，因为元素的高度是使用 align-items: stretch 设置的(自由空间，不是长度，计算)。

现在，而不是使用 align-items: stretch ，让我们用 height: 50%对于每个元素:

.container {
  display: flex;
  flex-wrap: wrap;  
  /* align-items: stretch; */  
  width: 160px;
  height: 500px;
  border: 1px solid red;
}

.box3 { height: 30px; }


.box1 { background-color: gray;   }
.box2 { background-color: orange; }
.box3 { background-color: yellow; }

.container > div {
  height: 50%; /* NEW */
  flex: 0 0 50px;
  border: 1px solid blue;
}

* {
  color: blue;
  font-size: 22px;
}

<div class="container">
    <div class="box1">box1</div>
    <div class="box2">box2</div>
    <!--<div class="box3">box3</div>-->
    <div class="box1">box1</div>
    <div class="box2">box2</div>
</div>

每个元素(和行)的高度现在是 252 像素。添加了顶部和底部边框。

如果我们添加 box-sizing: border-box ，然后我们回到 250px，就像 align-items: stretch .

.container {
  display: flex;
  flex-wrap: wrap;  
  /* align-items: stretch; */  
  width: 160px;
  height: 500px;
  border: 1px solid red;
}

.box3 { height: 30px; }


.box1 { background-color: gray;   }
.box2 { background-color: orange; }
.box3 { background-color: yellow; }

.container > div {
  box-sizing: border-box;  /* NEW */
  height: 50%;
  flex: 0 0 50px;
  border: 1px solid blue;
}

* {
  color: blue;
  font-size: 22px;
}

<div class="container">
    <div class="box1">box1</div>
    <div class="box2">box2</div>
    <!--<div class="box3">box3</div>-->
    <div class="box1">box1</div>
    <div class="box2">box2</div>
</div>

.box3
现在让我们重新介绍 .box3到 HTML 结构，恢复 box-sizing: content-box和 align-items: stretch ，并删除 height: 50%项上。我们回到原来的布局。

.container {
  display: flex;
  flex-wrap: wrap;  
  align-items: stretch; 
  width: 160px;
  height: 500px;
  border: 1px solid red;
}

.box3 { height: 30px; }


.box1 { background-color: gray;   }
.box2 { background-color: orange; }
.box3 { background-color: yellow; }

.container > div {
  flex: 0 0 50px;
  border: 1px solid blue;
}

* {
  color: blue;
  font-size: 22px;
}

<div class="container">
    <div class="box1">box1</div>
    <div class="box2">box2</div>
    <div class="box3">box3</div>
    <div class="box1">box1</div>
    <div class="box2">box2</div>
</div>

align-items: stretch第一行的元素高度为 252 像素。
align-items: stretch第二行的元素高度为 248 像素。

这是因为 box3具有定义的实际长度( height: 30px )，它激活 box-sizing: content-box , 将顶部和底部边框 (2px) 添加到行高 (252px)。

所以让我们申请 box-sizing: border-box至 box3 .

听起来不错，除了 align-items不在乎 box-sizing .

所以虽然 box-sizing确实使第一行 250 像素，边框仍然计入第二行 (248 像素)。

.container {
  display: flex;
  flex-wrap: wrap;  
  align-items: stretch; 
  width: 160px;
  height: 500px;
  border: 1px solid red;
}

.box3 { height: 30px; }


.box1 { background-color: gray;   }
.box2 { background-color: orange; }
.box3 { background-color: yellow; }

.container > div {
  flex: 0 0 50px;
  border: 1px solid blue;
}

* {
  box-sizing: border-box; /* new */
  color: blue;
  font-size: 22px;
}

<div class="container">
    <div class="box1">box1</div>
    <div class="box2">box2</div>
    <div class="box3">box3</div>
    <div class="box1">box1</div>
    <div class="box2">box2</div>
</div>

注意除了 padding和 borders ，还有关于 line-height的问题和 font-size在这个特定的布局中。为了使行高清楚地有意义，您必须删除这些因素。

* {
  font-size: 0;
  line-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.container {
  display: flex;
  flex-wrap: wrap;  
  width: 160px;
  height: 500px;
}

.box3 { height: 30px; }

.box1 { background-color: gray;   }
.box2 { background-color: orange; }
.box3 { background-color: yellow; }

.container > div { flex: 0 0 50px; }

<div class="container">
  <div class="box1">box1</div>
  <div class="box2">box2</div>
  <div class="box3">box3</div>
  <div class="box1">box1</div>
  <div class="box2">box2</div>
</div>

现在第一行的元素高度为265px，第二行的元素高度为235px。

自由空间是在所有固定长度都被考虑到计算中后剩下的空间。

500 - 30 = 470 ----> this is the free vertical space in your container

470 / 2 = 235  ----> this is the free space allocated to each row

235 + 30 = 265  ----> this is the height of the first row, since 30px is added to the free space