html – 带CSS的钻石形状布局

我试图以钻石形式布置无序列表.

我不知道如何做到这一点,而没有添加hacky< div>的全部.

我宁愿在语义上保持一个干净的ul.

代码示例(我可以添加id,这没有问题.)

<ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
</ul>

我希望它看起来像这样：

也许这样的事情可以通过显示：flex来实现？也许显示：table-cell？我已经尝试了一切,迄今为止,我无法弄清楚.

解决方法

可以通过flexBox实现布局：

ul {
  display: flex;
  flex-direction: column;                 /* 1 */
  flex-wrap: wrap;                        /* 1 */
  height: 200px;                          /* 2 */
  list-style: none;
  padding: 0;                             /* 3 */
}

li {
  flex: 0 0 100%;                         /* 4 */
  display: flex;                      
  justify-content: center;                /* 5 */
  align-items: center;                    /* 5 */
  background-color: lightyellow;
}

li:not(:first-child):not(:last-child) {   /* 6 */
  flex-basis: 50%;
}

span {
  height: 50px;
  width: 100px;
  background-color: lightgreen;
  border: 1px solid black;
  display: flex;                         /* 7 */
  justify-content: center;               /* 7 */
  align-items: center;                   /* 7 */
}
* { Box-sizing: border-Box; }
/* grid lines
ul {  border: 1px dashed black; }
li {  border: 1px solid red;  }
*/

<ul>
  <li><span>item 1</span></li>
  <li><span>item 2</span></li>
  <li><span>item 3</span></li>
  <li><span>item 4</span></li>
</ul>

jsFiddle

笔记：

>将容器设置为列换行.>对于Flex项目来知道要包装的位置,必须在容器上定义高度.>删除ul默认填充.>使列表项消耗所有列空间.>中心横向垂直.>使第二和第三个列表项消耗半列空间,因此两者都适合一列.>垂直和水平中心文本.