Question

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

在500px我想将布局更改为2行，其中块为宽度的50％。

如何使用flex执行此操作。

＆＃13;

*{
  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%;
  }
}

＆＃13;

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

＆＃13;

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%;，在flex: 2 50%;端口视图中设置500px。您可以查看我的代码段：

＆＃13;

*{
  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%;
  }
}

＆＃13;

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

＆＃13;

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>

CSS - 响应式flex布局

3 个答案: