我有一个包含六个元素的部分。
我希望在桌面设备上每行 3 个元素,在中型设备上我希望每行 2 个元素,在移动设备上每行 1 个元素
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
这是CSS:
.flex-container{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
@media only screen and (max-width: 768px) and (min-width: 320px){
.flex-container {
display: flex;
justify-content: center;
flex-basis: 100%;
}
}
这在桌面上只显示 3 个元素,在移动设备上每个元素一个,但没有 2 个元素,我需要在我的代码中更改什么才能获得我想要的内容?
最佳答案
布局可以通过调整媒体查询中的flex-basis
来实现。
思路是这样的:
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-container > div {
flex: 1 0 26%;
}
@media ( max-width: 768px) {
.flex-container > div {
flex-basis: 34%;
}
}
@media ( max-width: 320px) {
.flex-container > div {
flex-basis: 51%;
}
}
/* non-essential demo styles */
.flex-container > div {
height: 50px;
background-color: lightgreen;
border: 2px solid white;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2em;
}
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
jsFiddle demo
在第一个flex
规则中,flex-grow
被设置为1
。这意味着 flex 元素将占用所有可用空间。
因此,通过flex-basis
表示的每一项的宽度不再需要是传统的33.33%(每行3项)、50%(每行2项)和100% .
这些数字通常需要手动调整(例如,calc()
)以便为边距腾出空间。
在这种情况下,由于采用了 flex 技术,flex-grow
会消耗剩余空间,而 flex-basis
只需要大到足以强制换行即可。
因此,例如,对于 flex-basis: 26%
,只有三个元素可以放在该行上。第四个必须包裹。有足够的利润空间。 flex-grow
填充空白空间。
关于html - 每行 3 个元素的响应式 flexbox,然后是 2,然后是 1,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52396033/