html - 用 flexbox 包装内联嵌套列表

Question

我想知道是否可以使用 flexbox 和包装创建以下行为。

html {
  font-size: 10px;
}
body {
  padding: 30px;
  font-size: 2rem;
}
.list {
  display: inline;
}
.item {
  padding: 10px;
  display: inline-block;
  background-color: light-gray;
  border: 1px solid gray;
}

<div style="width: 250px;">
  <div class="list">
    <div class="list">
      <div class="item">asfasfasf</div>
      <div class="item">afasf</div>
      <div class="item">asfff asfasasfasf</div>
      <div class="item">afasf</div>
      <div class="item">afasf</div>
      <div class="item">afasf</div>
    </div>
    <div class="item">trailing</div>
  </div>
</div>

http://codepen.io/anon/pen/JXqgag?editors=1100

上面有两个包含元素的内联容器，一个嵌套在另一个中，其中外部元素紧挨着内部元素对齐，“跨越”内部容器的边界。

我想使用具有相同设置的 flexbox 来实现 flexbox 对齐选项的一些其他细节。假设嵌套列表是一项硬性要求，是否可以使用 flex 或 inline-flex 来实现与“Trailing”元素相同的行为。我的尝试总是将尾随元素留在自己的行上，似乎 inline-flex 更类似于 inline-block;。

Answer 1

您的布局之所以有效，是因为容器是 display: inline。这允许元素在换行后并排对齐。

如果容器是 display: inline-block，您的布局将不工作，因为盒子会包裹嵌套的 .list 元素，将“尾随”元素强制到下一行。

display: inline-flex 类似于display: inline-block。 “trailing”元素不会侵入其同胞的 block 框，而是存在于其自己的框内，该框可能与其同胞相邻或在其下方，具体取决于其父元素的 display 值。

但是，可以在每个 .item 的内容上使用 Flex 对齐方式。

html { font-size: 10px; }

body {
  padding: 30px;
  font-size: 2rem;
}

.list {
  display: inline;
}

.item {
  display: inline-flex;         /* adjusted */
  padding: 10px;
  background-color: lightgray;  /* corrected; light-gray not a valid color */
  border: 1px solid gray;
}

<div style="width: 250px;">
  <div class="list">
    <div class="list">
      <div class="item">asfasfasf</div>
      <div class="item">afasf</div>
      <div class="item">asfff asfasasfasf</div>
      <div class="item">afasf</div>
      <div class="item">afasf</div>
      <div class="item">afasf</div>
    </div>
    <div class="item">trailing</div>
  </div>
</div>

Revised Codepen