CSS：Flexbox中的嵌套问题

Question

CSS：Flexbox中的嵌套问题

15

我玩弄flexboxes，想要结合列和行容器。我有一个问题：

为什么放在列中的行元素不能跨越整个flex-container的宽度？

示例代码在此处：js-fiddle

/* CSS: */

.flex-container {
  color: blue;
  background-color:yellow;
  text-decoration: bold;
  text-size: 1em;
  display: flex;
  justify-content:space-between;
  align-items:center;
}
.horizontal {
  flex-direction:row;
  background-color: red;
}

.vertical {
  flex-direction:column;
}

<body>
  <div class="flex-container vertical">
  <div class=flex-item>1 </div>
  <div class=flex-item>2 </div>
  <div class="flex-container horizontal" >
    <div class=flex-item>3a </div>
    <div class=flex-item>3b </div>
    <div class=flex-item>3c </div>
  </div>
  <div class=flex-item>4 </div>
  <div class=flex-item>5 </div>
  </div>
</body>

感谢任何帮助！

- Raphael Kleindienst

1

因为你的.horizontal容器不够宽。请在其中添加width: 100%;。 - roberrrt-s

那真的很简单 ;) 我还以为我已经尝试过了... - Raphael Kleindienst

呵呵，抱歉。咖啡还没起作用。我也不太清楚为什么宽度没有自动限制，所以我将其发布为评论，直到找到解决方案。 - roberrrt-s

3个回答

3

由于您在flex容器上设置了align-items:center;，因此除了居中外，项目还仅占据其所需的最小空间。

如果您没有设置这个属性，则将启用stretch的默认值，而项目将占据整个宽度。

然后，正如@Michael_B指出的那样，您可以在flex项目上应用align-self:center来使项目在交叉轴上居中。

.flex-container {
  color: blue;
  background-color: yellow;
  text-decoration: bold;
  text-size: 1em;
  display: flex;
  justify-content: space-between;
}

.horizontal {
  flex-direction: row;
  background-color: red;
}

.vertical {
  flex-direction: column;
}

.flex-item {
  align-self: center;
  /* center each flex item along the cross axis */
  text-align: center;
  /* horizontally center content within flex item */
}

<body>
  <div class="flex-container vertical">
    <div class=flex-item>1 </div>
    <div class=flex-item>2 </div>
    <div class="flex-container horizontal">
      <div class=flex-item>3a </div>
      <div class=flex-item>3b </div>
      <div class=flex-item>3c </div>
    </div>
    <div class=flex-item>4 </div>
    <div class=flex-item>5 </div>
  </div>
</body>

- Danield

你能详细说明为什么在.horizontal上应用align-items: stretch无效吗？ - roberrrt-s

1

@Roberrrt，它确实“工作”，但您需要注意发生的拉伸是在交叉轴上，因此当 flex 方向为列时 - 拉伸水平发生，而当 flex 方向为行时 - 拉伸垂直发生。 - Danield

1

这个答案很好地解释了原因。对于纯弹性解决方案，请从容器中删除 align-items: center。将 align-self: center 添加到您想要居中的弹性项。中间项（3a/b/c）默认会被拉伸：https://jsfiddle.net/cq0ecd5u/2/ - Michael Benjamin

@Michael_B，非常感谢，我已经将它添加到帖子中了。 - Danield

0

在水平弹性盒子中添加width: 100%，并将其内部项目设置为flex: 1，我得到了以下效果：

   body {
     background-color: black
   }

   .flex-container {
     color: blue;
     background-color: yellow;
     display: flex;
     justify-content: space-between;
     align-items: center;
   }

   .horizontal {
     flex-direction: row;
     background-color: red;
     width: 100%; /*this line was added*/
   }
   
   /*these lines*/
   .horizontal .flex-item {
     flex: 1;
   }
   /*ware added*/

   .vertical {
     flex-direction: column;
   }

   .flex-item {
     background: tomato;
     padding: 5px;
     width: 100px;
     height: 75px;
     margin: 5px;
     line-height: 75px;
     color: white;
     font-size: 3em;
     text-align: center;
   }

<body>
  <div class="flex-container vertical">
    <div class="flex-item">1 </div>
    <div class="flex-item">2 </div>
    <div class="flex-container horizontal">
      <div class="flex-item">3a</div>
      <div class="flex-item">3b</div>
      <div class="flex-item">3c</div>
    </div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
  </div>
</body>

- Razvan Zamfir

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- roberrrt-s · Accepted Answer

这是因为Flexbox的工作方式。

由于.horizontal容器本身就是一个flex子项，它会自动调整到其他子项的大小。只留出溢出内容即.horizontal子项本身的空间。

手动设置宽度将会为项创建空间，然后justify-content: space-between就会生效。

解决方法是更改以下规则：

.horizontal {
    flex-direction: row;
    background-color: red;
    width: 100%;
}