如何使用弹性盒？

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>

我必须将divs 对齐，如下所示：所有div具有“外部”类的 s 必须从新行开始，所有div具有“内部”类的 s 必须位于“外部”内的同一行div，并且div具有更深类的内部“ external"div应该从新行开始，并且 "newLineContent"div必须位于 "deeper" 内的同一div行

我如何使用 Flexbox 来实现这一点？或者还有其他方法可以实现吗？

Answer 1

.outer{
  display: flex;
}

就那么简单！如何配置父选项和子选项取决于您想要实现的效果。