display:flex属性是否适用于子元素？为何子元素设置后会移动

问题描述 #

原本认为display:flex仅作用于父容器，但在以下代码中，为.item（作为grid容器的子元素）设置align-items、justify-content等Flexbox属性后，.item内部的内容发生了移动，请问这是为什么？

代码示例 #

CSS样式 #

.container {
  height: 100vh;
  display: grid;
  gap: 3rem;
  grid-template-columns: 1fr 1fr 1.5fr;
  grid-template-rows: 1fr 1fr;
}
.item {
  font-size: 10px;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  background-color: rgb(105, 49, 158);
  display: flex;
  justify-content: center;
  align-items: center;
}

HTML结构 #

<div class="container">
  <div class="item cowboy">1</div>
  <div class="item astronaut">2</div>
  <div class="item book">3</div>
</div>

原因解释 #

你的核心认知没错：display:flex确实是给父容器设置的属性，但这里的.item元素同时拥有两个身份：

• 它是.container（grid容器）的子元素
• 它自己又是内部文本节点（1、2、3）的父容器

当你给.item添加display:flex时，它就变成了一个flex容器，此时justify-content和align-items是用来控制**它自己的子元素（也就是里面的数字文本）**在它内部的水平、垂直对齐方式。你看到的“移动”，本质是.item作为flex容器在调整自身子元素的布局，而非这些属性直接让.item本身移动。

简单说：你给.item开了flex容器的功能，它就开始管自己内部的元素怎么摆了。

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