带有无序列表的 Flexbox答案

【问题标题】：Flexbox with Unordered list带有无序列表的 Flexbox
【发布时间】：2015-12-01 02:27:44
【问题描述】：

我正在尝试学习 flexbox，我真的很喜欢它。我正在尝试 το 使用动态宽度，当我使用 divs 时它可以工作。如果我尝试用li 来做这件事，它就不起作用了。我的代码在 codepen 上。

div.example
  ul
    li
      | 1
    li
      | 2
    li
      | 3
    li
      | 4
    li
      | 5
    li
      | 6

div.container
  div.col
    | 1
  div.col
    | 2
  div.col
    | 3
  div.col
    | 4
  div.col
    | 5
  div.col
    | 6

SASS 代码

.container {
  border: 1px solid #000;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 50%;
  
  .col {
    width: calc(100% / 3);
    height: 120px;
    text-align: center;
  }
}

.example {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 50%;
  border: 1px solid #000;
  margin: 1em 0;
  
  ul {
    width: 100%;
    padding-left: 0;
  }

  li {
    list-style: none;
    display: inline-block;
    width: calc(100% / 3);
    height: 120px;
    text-align: center;
  }
}

【问题讨论】：

标签： css flexbox

【解决方案1】：

您需要将 flex 属性应用到<ul>

ul {
  display: flex;
  flex-direction: row; <-- not needed as this is the default behavior
  flex-wrap: wrap;
}

将属性放在<div> 上会告诉它在flex 中显示<ul>，而不是<li>。

【讨论】：

答案是旧的，但我想问为什么我们需要提供row，因为默认情况下 flex 是 row？
@localhost 简短回答：你不需要它，flex-direction 默认是row（在桌面上）

【解决方案2】：

根据您的标记，请注意<li> 元素是<ul> 的子元素，而不是.example 除法元素。

<div class="example">
  <ul>
    <li>1</li>
  </ul>
</div>

由于<li> 元素的直接父元素是<ul>，因此请使用<ul> 上的flex 属性，该属性环绕多个<li> 元素，而不是外部<div> 元素：

.example {
  width: 50%;
  border: 1px solid #000;
  margin: 1em 0;

  ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    padding-left: 0;
  }

  li {
    list-style: none;
    display: inline-block;
    width: calc(100% / 3);
    height: 120px;
    text-align: center;
  }
}

http://codepen.io/anon/pen/NGPBbg

【讨论】：

这在 Safari 8 或 9 中不起作用，但在 Chrome 中起作用。我有类似的问题，并且无法在我的生活中解决这个问题。但是，我发现类似的笔可以与 div 一起使用 (jsfiddle.net/s1Leczfg/2)。