在 flexbox 中调整 flexbox 的大小答案

【问题标题】：sizing a flexbox within a flexbox在 flexbox 中调整 flexbox 的大小
【发布时间】：2017-03-01 22:21:16
【问题描述】：

我有一个弹性盒子，我想再放两个弹性盒子。

.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%，另一个占据 col_right 的 75%。我有我认为应该包含 inside_left 和 inside_right 的 int_row，但不知道这是否是多余的。即使我将 int_row 设置为 100%，但宽度实际上并没有延伸到接近 col_right 的全宽。

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

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

【问题讨论】：

添加您的 HTML 也可以通过小提琴链接更好地理解

标签： html css alignment flexbox sizing

【解决方案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。我使用了简写的 flex 属性。使用 flex 速记属性总是一个好主意，因为它会强制您设置 flex-grow、shrink 和 base 值。某些浏览器 (IE) 没有正确的默认值，这样可以省去一些麻烦。

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

【讨论】：