带有无序列表的Flexbox

Question

我正在尝试学习flexbox,我真的很喜欢它.我正在尝试使用动态宽度,当我使用div时,它可以工作.如果我尝试用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;
  }
}

Answer 1

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

ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

把属性放在<div>告诉它显示<ul>在flex中,而不是<li>.

Answer 2

根据您的标记,请注意<li>元素是子元素<ul>,而不是.example分割元素.

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

由于<li>元素的直接父元素是<ul>,使用包围多个元素的flex属性而不是外部元素:<ul><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