html - 在 flexbox 中调整 flexbox 的大小

Question

我有 flexbox，我想在其中再放置两个 flexbox。

.Summary_Row{
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: stretch;
    align-items: stretch;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-flow: row;
    flex-flow: row;
    width: 100%;
    margin-top: 10px;
    border-bottom: 2px solid #d3d3d3;
    }

.col_left{ order:1; width: 33%; display:flex; justify-content: center; text-align: center;}
.col_center{order:2; width: 33%; display:flex; justify-content: center;  border-right: 2px solid #d3d3d3; border-left: 2px solid #d3d3d3; text-align: center;}
.col_right{ order:3; width: 33%; display:flex; justify-content: center; text-align: center;}


    .int_row{
     display: -webkit-flex;
     display: flex;
     -webkit-align-items: center;
     align-items: center;
     -webkit-justify-content: center;
     justify-content: center;
     -webkit-flex-flow: row;
     flex-flow: row;
     width: 100%;
    }


#inside_left{order:1; display:flex; justify-content: center; align-items: center; width: 25%;}
#inside_right{order:2;  display:flex; flex-flow: column; justify-content: center; width: 75%; text-align:left;}

在我上面的 CSS 中，我有一个 flexbox (summary_row)，它被分成三个相等的列。对于 col_right，我想进一步将其并排分成两个框，一个占 col_right 的 25%，另一个占 75%。我有 int_row，我认为它应该包含 inside_left 和 inside_right，但不知道这是否多余。即使我将 int_row 设置为 100%，宽度实际上并没有扩展到接近 col_right 的整个宽度。

上图中蓝色是int_row，绿色是inside_right。请注意，蓝色并没有接近宽度的 100%。我基本上不希望图像和绿色重叠。我在想如果宽度扩展得更多，就不会发生重叠。

关于我如何实现这一点或者我是否正确地考虑了这一点有什么建议吗？

Answer 1

我做了 a working example在 CodePen 上为您服务。

html:

<div class="row">
  <div class="row__left">.row__left</div>
  <div class="row__center">.row__center</div>
  <div class="row__right">
    <div class="row__right-a">.row__right-a</div>
    <div class="row__right-b">.row__right-b</div>
  </div>
</div>

CSS:

.row {
  display: flex;
  border: 1px solid #000;
  padding: .5em;
}

.row__left,
.row__center,
.row__right {
  flex: 0 0 33.3333333%;
  border:1px solid red;
  padding: .5em;
  box-sizing: border-box;
}

.row__right {
  display: flex;
}

.row__right-a {
  flex: 0 0 25%;
  background-color: blue;
}
.row__right-b {
  flex: 0 0 75%;
  background-color: green;
}

您不需要额外的 .int_row 元素。因为 flex 元素(子项)也可以是 flex 容器。

当尝试使用 flexbox 制作网格时，您还应该使用 flex-basis 和 flex-grow 而不是 width。我使用了简写的 flex 属性。使用 flex 简写属性总是一个好主意，因为它会强制您设置 flex-grow、shrink 和 basis 值。一些浏览器 (IE) 没有正确的默认值，这样可以省去一些麻烦。

此外，this是开始使用 Flexbox 的文章。