了解flex：使用align-item包装：拉伸

时间：2018-07-25 08:58:09

标签： html css css3 flexbox

如果运行以下代码段，则可以看到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时，项目将移动转到下一个弹性框 row 。但是这些row在flexbox container中的对齐方式是什么？

我的理解是：（假设flex-direction: row并允许包装）如果物品占据一个以上的row，则每个row的高度将相等（= flexbox_container_height/row_count）且每个row都充当flexbox container。因此，如果我应用属性flex-items:center，则项目将在这些行的每一行居中。

我的理解正确吗？

2 个答案:

答案 0 :(得分：5)

这里的问题不是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，{{1 }}和其他管理可用空间的属性和功能。

fr

box-sizing属性采用两个值：

  • box-sizing（默认值）
  • content-box

使用border-box，您定义的任何长度将不包括填充或边框。

使用content-box，填充和边框将作为长度计算的因数。

在引用CSS Box Model时应考虑这些术语。

enter image description here

来源：W3C

请注意，border-box不提供任何box-sizing或padding-box值。保证金始终单独添加。

您的代码

这是您的flex容器：

margin-box

在弹性商品中，暂时删除.container { display: flex; flex-wrap: wrap; align-items: stretch; /* default setting */ width: 160px; height: 500px; border: 1px solid red; } 。这是定义的高度为30px的项目。

box3
.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;
}

主要观察结果

：
  • 两行的高度现在都为250px。
  • 即使顶部/底部边框有4像素，并且<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>是默认的box-sizing，但高度仍为250像素。
  • 边框被忽略，因为使用content-box（可用空间，而不是长度，计算）来设置项目的高度。

现在，让我们为每个项目使用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;
}

每个项目（和行）的高度现在为252px。顶部和底部边框已添加。

如果我们添加<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>，则返回到250px，就像box-sizing: border-box一样。

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到HTML结构，恢复.box3和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>项高度为252px。

第二行的align-items: stretch项目高度为248px。

这是因为align-items: stretch定义了实际长度（box3），该长度激活了height: 30px，这将顶部和底部边框（2px）添加到行高（252px）。

因此，我们仅将box-sizing: content-box应用于box-sizing: border-box。

听起来不错，但box3不在乎align-items。

因此，尽管box-sizing确实使第一行为250像素，但边框仍计入第二行（248像素）。

box-sizing
.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; }

现在第一行中的项目高度为265px，第二行中的项目高度为235px。

所有固定长度都已计入计算后，剩下的就是可用空间。

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

答案 1 :(得分：-3)

您给容器的高度为500px，为容器的子元素box3的高度为30px。

您应该给父母子女关系设定相同的身高值，或者只是不给任何身高，让他们采取自己的身高。

相关问题
最新问题