如何使用 Flexbox 中的媒体查询控制每行的项目数?
How to control number of items per row using media queries in Flexbox?
所以假设我有以下 标记
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
以及以下样式(SASS)
@mixin max-width($width) {
@media screen and (max-width: $width) {
@content;
}
}
.container {
display: flex;
@include max-width(992px) {
number: 4; //Hypothetical property that is supposed to control number per row
}
@include max-width(640px) {
number: 2; //Hypothetical property that is supposed to control number per row
}
}
.item {
background-color: tomato;
padding: 20px;
margin-right: 20px;
flex: 1;
}
是否有真正的 Flexbox CSS 替代我假设的 number
属性 可以控制每行显示多少项目?
浮动式网格很方便,因为 width
每个 .row
可以容纳无限 .items
个。但是对于 flexbox,我必须使用许多 .row
类 之类的变通方法来控制不同宽度的项目的布局和数量。到目前为止,我很幸运,但有些类型的布局会因这种方法而失败。
我不得不去除块周围的边距,因为百分比宽度很难清楚地应用于有边距的元素,但您可以在 http://codepen.io/anon/pen/jPeLYb?editors=110 看到变化:
@mixin max-width($width) {
@media screen and (max-width: $width) {
@content;
}
}
.container {
position: relative;
display: flex;
flex-flow: row wrap;
}
.item {
background-color: tomato;
box-sizing: border-box;
padding: 20px;
outline: 2px solid blue;
flex: 1;
}
@include max-width(992px) {
.item {
flex-basis: 25%;
background-color: red;
}
}
@include max-width(640px) {
.item {
flex-basis: 50%;
background-color: green;
}
}
这里的重要部分是:
flex-flow: row wrap
允许 flexbox 出现在多行上(默认是 nowrap
)
flex-basis
在这种情况下相当于 width
position: relative
这使得宽度相对于容器,而不是主体(这会搞砸四舍五入)
我找到了一个更好的解决方案,可以在不使用媒体查询的情况下限制不同设备中一行中的列数:
HTML:
<div class="flex-container">
<div class="item">
<h3>ONE</h3>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cumque maxime odit ipsam, fugit pariatur quis eos
maiores nostrum? Alias tempora voluptate veritatis omnis quae corporis vero excepturi in rem ipsam.
</div>
<div class="item">
<h3>TWO</h3>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cumque maxime odit ipsam, fugit pariatur quis eos
maiores nostrum? Alias tempora voluptate veritatis omnis quae corporis vero excepturi in rem ipsam.
</div>
<div class="item">
<h3>THREE</h3>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cumque maxime odit ipsam, fugit pariatur quis eos
maiores nostrum? Alias tempora voluptate veritatis omnis quae corporis vero excepturi in rem ipsam.
</div>
<div class="item">
<h3>FOUR</h3>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cumque maxime odit ipsam, fugit pariatur quis eos
maiores nostrum? Alias tempora voluptate veritatis omnis quae corporis vero excepturi in rem ipsam.
</div>
</div>
CSS:
.flex-container {
display: flex;
flex-wrap: wrap;
}
.item {
box-sizing: border-box;
flex: 1 0 250px;
margin: 1rem;
padding: 1rem;
border: 1px solid #000;
border-radius: 5px;
}
Codepen link: https://codepen.io/bala285/pen/YzqpLod
来源:https://www.fourkitchens.com/blog/article/responsive-multi-column-lists-flexbox/
所以假设我有以下 标记
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
以及以下样式(SASS)
@mixin max-width($width) {
@media screen and (max-width: $width) {
@content;
}
}
.container {
display: flex;
@include max-width(992px) {
number: 4; //Hypothetical property that is supposed to control number per row
}
@include max-width(640px) {
number: 2; //Hypothetical property that is supposed to control number per row
}
}
.item {
background-color: tomato;
padding: 20px;
margin-right: 20px;
flex: 1;
}
是否有真正的 Flexbox CSS 替代我假设的 number
属性 可以控制每行显示多少项目?
浮动式网格很方便,因为 width
每个 .row
可以容纳无限 .items
个。但是对于 flexbox,我必须使用许多 .row
类 之类的变通方法来控制不同宽度的项目的布局和数量。到目前为止,我很幸运,但有些类型的布局会因这种方法而失败。
我不得不去除块周围的边距,因为百分比宽度很难清楚地应用于有边距的元素,但您可以在 http://codepen.io/anon/pen/jPeLYb?editors=110 看到变化:
@mixin max-width($width) {
@media screen and (max-width: $width) {
@content;
}
}
.container {
position: relative;
display: flex;
flex-flow: row wrap;
}
.item {
background-color: tomato;
box-sizing: border-box;
padding: 20px;
outline: 2px solid blue;
flex: 1;
}
@include max-width(992px) {
.item {
flex-basis: 25%;
background-color: red;
}
}
@include max-width(640px) {
.item {
flex-basis: 50%;
background-color: green;
}
}
这里的重要部分是:
flex-flow: row wrap
允许 flexbox 出现在多行上(默认是nowrap
)flex-basis
在这种情况下相当于width
position: relative
这使得宽度相对于容器,而不是主体(这会搞砸四舍五入)
我找到了一个更好的解决方案,可以在不使用媒体查询的情况下限制不同设备中一行中的列数:
HTML:
<div class="flex-container">
<div class="item">
<h3>ONE</h3>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cumque maxime odit ipsam, fugit pariatur quis eos
maiores nostrum? Alias tempora voluptate veritatis omnis quae corporis vero excepturi in rem ipsam.
</div>
<div class="item">
<h3>TWO</h3>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cumque maxime odit ipsam, fugit pariatur quis eos
maiores nostrum? Alias tempora voluptate veritatis omnis quae corporis vero excepturi in rem ipsam.
</div>
<div class="item">
<h3>THREE</h3>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cumque maxime odit ipsam, fugit pariatur quis eos
maiores nostrum? Alias tempora voluptate veritatis omnis quae corporis vero excepturi in rem ipsam.
</div>
<div class="item">
<h3>FOUR</h3>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cumque maxime odit ipsam, fugit pariatur quis eos
maiores nostrum? Alias tempora voluptate veritatis omnis quae corporis vero excepturi in rem ipsam.
</div>
</div>
CSS:
.flex-container {
display: flex;
flex-wrap: wrap;
}
.item {
box-sizing: border-box;
flex: 1 0 250px;
margin: 1rem;
padding: 1rem;
border: 1px solid #000;
border-radius: 5px;
}
Codepen link: https://codepen.io/bala285/pen/YzqpLod
来源:https://www.fourkitchens.com/blog/article/responsive-multi-column-lists-flexbox/