CSS - 响应式 flex 布局

Question

我有一个简单的 flex 布局，连续 4 个 block 。

在 500 像素处，我想将布局更改为 2 行， block 占宽度的 50%。

我如何使用 flex 做到这一点。

*{
  font-family: sans-serif;
}

ul{
  border: 1px solid red;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-wrap: no-wrap;
  flex-direction: row;
}

li{
  /*flex-grow: 1;*/
  width: 25%;
  height: 100px;
  background-color: red;
  margin: 8px;
  list-style: none;
  color: white;
  padding: 10px;
}

@media (max-width: 500px){
  ul{
    /*flex-wrap: wrap;*/
  }
  li{
    background: yellow;
    width: 50%;
  }
}

<ul>
  <li class="one">One</li>
  <li class="two">Two</li>
  <li class="three">Three</li>
  <li class="three">Four</li>
</ul>

Answer 1

您缺少的是 flex-basis。

您还有一些填充和边距可能会稍微搞砸布局。我建议将它们设置在 li 的内部子元素上。

*{
  font-family: sans-serif;
}

ul{
  border: 1px solid red;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-wrap: no-wrap;
  flex-direction: row;
}

li{
  /*flex-grow: 1;*/
  width: 25%;
  height: 100px;
  background-color: red;
  list-style: none;
  color: white;
}

@media (max-width: 500px){
  ul{
    flex-wrap: wrap;
  }
  li{
    background: yellow;
    flex-basis: 50%;
    max-width: 50%;
    width: 50%;
  }
}