html - 使一个 flex 元素占据整个列

Question

我有一个 flex 布局的无序列表。我希望将第一个 li 项(菜单的“主页”链接)定位在其自己的列中，如下所示:

我该怎么做？

---

由于语义原因，我不想将第一个列表项拆分出来并将其放在单独的 div 中。我希望它位于 HTML 的列表中。

* {
  outline: solid 1px grey;
}
ul {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  white-space: nowrap;
}

li {
  flex: 1;
}

ul > li:first-child {
  /* This item should be in its own column */
  color: green;
}

<ul>
  <li>
    First item and this is it
  </li>
  <li>
    Second item this is the sh*t
  </li>
  <li>
    Third after two to go
  </li>
  <li>
    Forth enabled flex is flow
  </li>
  <li>
    Fifth the rabbit digs a hole
  </li>
  <li>
    Sixth hole in the pork says "miew"
  </li>
</ul>

http://codepen.io/rooeee/pen/ObZwER

Answer 1

在带有 row wrap 的 flex 容器中，除非您添加容器，否则真的没有办法实现这种布局。我知道您不想更改 HTML。

但是，如果您可以切换到 column wrap 并为容器定义一个高度，那么您可以通过给它 flex-basis: 100% 使第一个链接占据整个列。这会强制后续元素换行。

revised codepen

ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  list-style-type: none;
  white-space: nowrap;
  height: 100px;
}
li {
  flex: 0 0 50%;
}
ul > li:first-child {
  flex-basis: 100%;
  color: green;
}
* {
  outline: solid 1px grey;
  box-sizing: border-box;
}

<ul>
  <li>
    First item and this is it
  </li>
  <li>
    Second item this is the sh*t
  </li>
  <li>
    Third after two to go
  </li>
  <li>
    Forth enabled flex is flow
  </li>
  <li>
    Fifth the rabbit digs a hole
  </li>
  <li>
    Sixth hole in the pork says "miew"
  </li>
</ul>

---

另外，如果您不想更改 HTML 的唯一原因是语义，您仍然可以在基于行的容器中构建布局，同时遵守干净、有效和语义代码。换句话说，创建嵌套的 flex 容器是可以的。

revised codepen

ul {
  display: flex;
  list-style-type: none;
	white-space: nowrap;
}
ul:first-child > li:first-child {
  flex: 0 0 20%;
}
ul:first-child > li:nth-child(2) {
  flex: 0 0 80%;
}
ul:first-child > li:nth-child(2) ul {
  flex-wrap: wrap;
}
ul:first-child > li:nth-child(2) li {
  flex: 0 0 50%;
}
* {
  box-sizing: border-box;
  padding: 0;
  outline: solid 1px grey;
}

<ul><!-- primary flex container -->
  <li>First item and this is it</li><!-- flex item #1 -->
  <li><!-- flex item #2 -->
    <ul><!-- nested flex container -->
      <li>Second item this is the sh*t</li><!-- flex item -->
      <li>Third after two to go</li><!-- flex item -->
      <li>Forth enabled flex is flow</li><!-- flex item -->
      <li>Fifth the rabbit digs a hole</li><!-- flex item -->
      <li>Sixth hole in the pork says "miew</li><!-- flex item -->
    </ul><!-- END nested flex container -->
  </li><!-- END flex item #2 -->
</ul><!-- END primary flex container -->