CSS响应式flex布局

Question

我有一个简单的flex布局，其中有4个块。

在500px我想改变布局到2行，块是宽度的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%;
  }
}

Answer 2

在普通视图中设置flex: 1 25%;，在500px端口视图中设置flex: 2 50%;。你可以在下面查看我的代码片段：

​

*{
  font-family: sans-serif;
}

ul{
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-flow: row wrap;
}

li{
  flex: 1 25%;
  height: 100px;
  background-color: red;
  list-style: none;
  color: white;
  padding: 10px;
  border: 10px solid #fff;
  box-sizing: border-box;
}

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

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

​

Answer 3

这个可以试一下这个

*{
  font-family: sans-serif;
}

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

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

@media screen and (max-width: 500px){
  ul{
    display: flex;
    flex-flow: wrap;
  }

  li{
    background: yellow;
    flex:  42%;
    padding: 2%;
  }
}   




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