Css 具有无序列表的Flexbox

我正在努力学习flexbox，我真的很喜欢它。我试着用动态宽度玩游戏，当我用

div

s玩游戏时，它会工作。如果我试着用

li

，它也不起作用。我的密码在上面

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;
  }
}

---

根据您的标记，请注意

元素是

的子元素，而不是

.example

division元素

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

---

您需要将flex属性应用于

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

ul{
显示器：flex；
flex direction:row；这在Safari 8或9中不起作用，但在Chrome中起作用。我也有类似的问题，我一辈子都无法解决。但是，我发现类似的笔也可以使用divs（）。答案很老，但我想问为什么我们需要给出一个
行，因为默认情况下flex是row？
.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;
  }
}

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