html - 如何使用 flex 盒子？

Question

我有这样的布局:

<div class="outer">
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner">
    <div class="deeper">
      <div class="newLineContent"></div>
      <div class="newLineContent"></div>
      <div class="newLineContent"></div>
    </div>
  </div>
</div>
<div class="outer">
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner">
    <div class="deeper">
      <div class="newLineContent"></div>
      <div class="newLineContent"></div>
      <div class="newLineContent"></div>
    </div>
  </div>
</div>

我必须对齐 div就像:所有 div具有“外部”类的 s 必须从新行和所有 div 开始具有“内部”类的 s 必须在“外部”中的同一行 div和 div s 在“外部”内部有更深层次的类 div应该从新行开始，“newLineContent”div s 必须在“更深”中的同一行 div

如何使用 flexbox 实现这一点？还是有其他方法可以实现？

Answer 1

没有 Flexbox 也可以做类似的事情，认为 Flexbox 在这种情况下似乎是最好的。

.outer,
.deeper {
  display: flex;
  flex-wrap: wrap;
}
.inner {
  flex-grow: 1;
  padding: 20px 10px;
  border: 1px solid white;
  background: lightgray;
}
.inner:last-child {
  flex-basis: 100%;
}
.newLineContent {
  flex-grow: 1;
  padding: 10px;
  border: 1px solid white;
  background: lightgray;
}

<div class="outer">
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner">
    <div class="deeper">
      <div class="newLineContent"></div>
      <div class="newLineContent"></div>
      <div class="newLineContent"></div>
    </div>
  </div>
</div>
<div class="outer">
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner">
    <div class="deeper">
      <div class="newLineContent"></div>
      <div class="newLineContent"></div>
      <div class="newLineContent"></div>
    </div>
  </div>
</div>

---

根据评论更新

如果 deeper 可以是任何 inner 的 child ，并且要获得类似的结果，则需要一个不存在的父选择器，或者为那些包含更深层次的inner提供一个额外的类。

另一种可能的解决方法是使用视口(viewport)单位vw。

.outer,
.deeper {
  display: flex;
  flex-wrap: wrap;
  width: calc(100vw - 40px);   /* 40px to make up for body's margins/scrollbar */
  margin: 0 auto;
}
.inner {
  flex-grow: 1;
  padding: 20px 10px;
  border: 1px solid white;
  background: lightgray;
}
.deeper {
  width: calc(100vw - 62px);   /* 62px is to make up for "inner" padding/border, 22px,
                                  and 40px for body's margins/scrollbar        */
}
.newLineContent {
  flex-grow: 1;
  padding: 10px;
  border: 1px solid white;
  background: lightgray;
}

<div class="outer">
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner">
    <div class="deeper">
      <div class="newLineContent"></div>
      <div class="newLineContent"></div>
      <div class="newLineContent"></div>
    </div>
  </div>
</div>
<div class="outer">
  <div class="inner"></div>
  <div class="inner">
    <div class="deeper">
      <div class="newLineContent"></div>
      <div class="newLineContent"></div>
      <div class="newLineContent"></div>
    </div>
  </div>
  <div class="inner"></div>
</div>