在 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

我已经在 CodePen 上为您制作了 a working example。

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 元素。因为弹性项目（子）也可以是弹性容器。

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

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

在 flexbox 中调整 flexbox 的大小

sizing a flexbox within a flexbox

html

css

alignment

sizing

flexbox