Question

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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

上面有两个带有物品的inline容器，一个嵌套在另一个容器中，外面的物品在内部物品旁边对齐，＆＃34;交叉＆＃34;内部容器的边界。

我希望使用具有相同设置的flexbox来实现flexbox对齐选项的其他一些细节。假设嵌套列表是一个硬性要求，是否可以使用flex或inline-flex来实现＆＃34; Trailing＆＃34;项目。我的尝试始终将尾随项目分开，似乎inline-flex更类似于inline-block;。

Answer 1

您的布局有效，因为容器为display: inline。这样即使在包装后元素也可以并排排列。

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

display: inline-flex与display: inline-block类似。 “trailing”元素不会侵入其兄弟的块区，并且存在于自己的框中，该框可以与其兄弟相邻或低于其兄弟，具体取决于其父级的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

使用flexbox包装内联嵌套列表

1 个答案: