flex布局---子元素未设置高度，默认与父元素同高---侧轴方向的拉伸

原创

已于 2024-07-08 11:11:04 修改 · 1.3k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#flex

于 2024-07-08 10:37:02 首次发布

父元素未设置固定高度，由子元素高度撑开，并给父元素开启 flex 布局，成为伸缩容器。

父元素中有三个子元素，为伸缩项目，三个伸缩项目都未指定高度，div.inner1 的高度由内容撑开，div.inner2 和 div.inner3 项目的高度也会被撑开，这是因为父元素开启了 flex 布局之后，主轴方向为横向，侧轴/交叉轴方向为纵向，主轴方向默认的对齐方式为 flex-start 主轴起点，而侧轴方向默认的对齐方式为 stretch 伸展到整个压缩容器的高度。因此，子元素虽未设置高度，但会与开启了 flex 布局的父元素同高。

关键点：父元素开启了 flex 布局；主轴方向为横向；子元素未指明高度；侧轴默认对齐方式为 stretch .

 .outer {
   
   
     width: 1000px;
     background-color: gray;
     /* 父元素开启 flex 布局，主轴为横向，侧轴为纵向 */
     display: flex;
 }
 .inner1 {
   
   
     width: 300px;