我有一个简单的 flex 布局,其中有 4 个连续 block 。
在 500px 处,我想将布局更改为 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>
最佳答案
您缺少的是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%;
}
}
关于CSS - 响应式柔性布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50812670/