代码之家 › 专栏 › 技术社区 › Sandeep Gupta

了解flex:使用对齐项换行:拉伸

flexbox css3 css html

3

Sandeep Gupta · 技术社区 · 6 年前

如果运行下面的代码片段,可以看到 height 两排中的 flexbox container 是不同的。有人能解释一下吗?

如果你评论 A线 (=删除显式 高度 从一个 挠性箱 item)两行在 高度 . 我不明白为什么?

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 行 . 但是这些东西的排列 行 s在 挠性箱 容器 ?

我的理解是:(假设 flex-direction: row 如果物品占用超过一个 行 ,每个 行 高度相等( = flexbox_container_height/row_count )每一个 行 充当 挠性箱 容器 . 所以如果我申请一个财产 flex-items:center ,项将在每行中居中。

我的理解正确吗?

2 回复 | 直到 6 年前

1

7

Michael Benjamin William Falcon 6 年前

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

真正的问题是 box-sizing .

要点:

free space !== length

这个 盒子大小 属性适用于长度,包括 height , width 和 flex-basis .

这个 盒子大小 财产没有应用于可用空间,因此它被忽略 对齐项目 , flex-grow , justify-content , fr 以及管理可用空间的其他属性和功能。

`盒子大小`

这个 盒子大小 属性采用两个值:

content-box (默认值)
border-box

与 内容框 ,任何您定义的长度 不会的 包括填充或边框。

与 边框框 ,填充和边框将被考虑到长度计算中。

当提到 CSS Box Model .

^{资料来源:

W3C}

请注意 盒子大小 不提供 padding-box 或 margin-box 价值观。页边距总是单独添加的。

你的代码

这是你的弹性容器:

.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像素高。
即使上下边框有4倍 盒子大小 是默认的 内容框 ,高度仍然是250像素。
边框将被忽略,因为项目的高度是使用 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”>框1</div>
<div class=“box2”>框2</div>
&它;!--<div class=“box3”>框3</div>-->
<div class=“box1”>框1</div>
<div class=“box2”>框2</div>
</分区>

每个项目(和行)的高度现在是252px。已添加顶部和底部边框。

如果我们加上 box-sizing: border-box ,然后我们回到250像素,就像 对齐项目:拉伸 .

.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”>框1</div>
<div class=“box2”>框2</div>
&它;!--<div class=“box3”>框3</div>-->
<div class=“box1”>框1</div>
<div class=“box2”>框2</div>
</分区>

`.box3`

现在让我们重新介绍一下 .框3 恢复到HTML结构 box-sizing: content-box 和 对齐项目:拉伸 ,并删除 身高: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>

这个 对齐项目:拉伸 第一排物品的高度是252像素。

这个 对齐项目:拉伸 第二排物品的高度是248px。

这是因为 盒3 定义了实际长度( height: 30px ),这将激活 框大小:内容框 ,它将顶部和底部边框(2px)添加到行高(252px)。

所以我们就申请 框大小:边框框 到 方框3 .

听起来不错,除了 对齐项目 不在乎 盒子大小 .

所以尽管 盒子大小 第一行是250px,第二行(248px)仍然有边框。

.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”>框1</div>
<div class=“box2”>框2</div>
<div class=“box3”>第三个盒子<div>
<div class=“box1”>框1</div>
<div class=“box2”>框2</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

2

-3

Sonia 6 年前

给容器的高度是500px,给容器的子元素box3的高度是30px。

你应该给亲子关系同等的高度值,或者只是不要给他们任何高度让他们接受自己同等的高度。