为何给body设置display:flex后flex容器会收缩？

这本质是不同布局模型的默认宽度计算逻辑差异：

1. 普通块级元素的默认行为
   默认状态下的div是块级元素，它会自动占满父容器的可用水平宽度——这是块级盒模型的核心特性，所以你注释掉display:flex后，容器会拉伸到视口100%宽度。

2. flex column容器的宽度逻辑
   当设置display:flex; flex-direction: column时，容器的主轴变为垂直方向，此时它的水平方向是交叉轴。Flex布局对交叉轴方向的容器尺寸有默认规则：容器宽度会收缩至能容纳所有子元素的最小宽度（包含子元素的宽、边距等）。你的例子里每个item宽100px，左右margin各10px，所以容器最终宽度是120px。

3. grid容器的默认行为
   display:grid的容器默认是块级网格容器，它继承了块级元素的特性，会自动占满父容器的可用水平宽度，这和普通div的表现一致。

如果你想让flex column容器也占满水平宽度 #

只需给.flex-container添加宽度声明即可：

.flex-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%; /* 或者 inline-size: 100% */
}

你的代码示例 #

HTML：

<div class="flex-container">
    <div class="item">item 1</div>
    <div class="item">item 2</div>
    <div class="item">item 3</div>
</div> 

CSS：

.flex-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.item {
  background-color: blue;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100px;
  width: 100px;
  margin: 10px;
} 

内容的提问来源于stack exchange，提问作者Guiver