使一个弹性项占据整个列

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%来使第一个链接占据整个列。 这会强制后续项目换行。

修改后的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容器很好。

修改后的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 -->