CSS-响应式Flex布局

ttmt 发表于 Dev

ttmt

我有一个简单的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>

冬季

你所缺少的是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%;
  }
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。