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

标签 html css 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元素完成，元素将移动到下一个 flexbox row .但是这些row的对齐方式是什么？ s 内 flexbox container ?

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

我的理解正确吗？

最佳答案

这里的问题不是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-sizingbox-sizing属性有两个值:
  • content-box (默认值)
  • border-box

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

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

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

    enter image description here

    来源: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

    关于html - 了解 flex : wrap with align-items: stretch，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51514843/

    上一篇：javascript - 在两列上传播 D3.js 图例

    下一篇：html - 标签在动画的一部分时不会激活相关字段

    相关文章：

    javascript - 如何检查 JavaScript 中用户浏览器是否不支持字符？

    css - 在 IE11 和 IE10 中与 flexbox 垂直对齐

    javascript - 不在桌面版时隐藏 Logo

    javascript - jQuery- .css() 不适用于输入

    html - CSS - 跨度 bg-color 与文本高度相同

    Javascript 在浏览器/选项卡关闭时显示设计的元素

    javascript - 在 Django 应用程序中引用 JS/CSS 文件的最基本方法是什么？

    html - 自定义 ul li，将元素符号居中对齐(作为文本)？

    html - Flexbox - 搜索框下方的搜索结果弹出窗口

    html - 使用 flex-wrap 在第 5 个元素之后中断到下一行时出现问题。

    ©2024 IT工具网  联系我们