显示 Flex 属性是否像父元素一样适用于内部元素

Question

当我了解到显示：flex；仅适用于 container(parent) 但在下面的代码中，当我在 child(items) 中使用弹性框属性时，例如 align-items、justify-contents 为什么子（item）元素开始移动。

**internal css styling **

 .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;
}

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

Answer 1

flex 不仅仅适用于父容器，如果我理解你的意图 此行 grid-template-columns: 1fr 1fr 1.5fr; 对项目的宽度有影响，使前 2 个项目具有相同的大小，而最后一个项目占据更多空间，使其看起来移动到右侧

如果您希望框在父容器中均匀对齐，请尝试此片段

.container {
  display: flex;
  justify-content: space-between; 
  align-items: center;
  width: 100%; 
}

.item {
  width:5em;
  text-align: center;
  padding: 20px;
  background-color: #0076ff; 
}

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