有什么方法可以使用 flex wrap 只在一列上换行吗?
Is there any way to use flex wrap to wrap on only one column?
假设我有 3 个 div...
HTML:
<section class="features">
<div class="item">
<h3 class="item-name">Item1</h3>
<p class="item-desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur sequi fuga labore. Distinctio eaque, officiis quaerat molestiae sed quis labore.</p>
</div>
<div class="item">
<h3 class="item-name">Item1</h3>
<p class="item-desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur sequi fuga labore. Distinctio eaque, officiis quaerat molestiae sed quis labore.</p>
</div>
<div class="item">
<h3 class="item-name">Item1</h3>
<p class="item-desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur sequi fuga labore. Distinctio eaque, officiis quaerat molestiae sed quis labore.</p>
</div>
</section>
CSS:
.section {
display: flex;
flex-wrap: wrap;
}
所以我想要的是当我减小屏幕尺寸时让这些项目只在一列上换行...
The current behavior is like this on medium screen size
I want the behavior to be like this in all other screen sizes
你可以在媒体查询中调用它你想做这样的事情吗?请告诉我
section.features {
display: flex;
justify-content:space-around;
padding:10px;
}
@media only screen and (max-width:768px){
section.features {display: grid;}
}
RESIZE ME
<section class="features">
<div class="item">
<h3 class="item-name">Item1</h3>
<p class="item-desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur sequi fuga labore. Distinctio eaque, officiis quaerat molestiae sed quis labore.</p>
</div>
<div class="item">
<h3 class="item-name">Item1</h3>
<p class="item-desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur sequi fuga labore. Distinctio eaque, officiis quaerat molestiae sed quis labore.</p>
</div>
<div class="item">
<h3 class="item-name">Item1</h3>
<p class="item-desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur sequi fuga labore. Distinctio eaque, officiis quaerat molestiae sed quis labore.</p>
</div>
</section>
<section class="features">
<div class="item">
<h3 class="item-name">Item1</h3>
<p class="item-desc">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur sequi fuga labore. Distinctio eaque, officiis
quaerat molestiae sed quis labore.
</p>
</div>
<div class="item">
<h3 class="item-name">Item1</h3>
<p class="item-desc">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur sequi fuga labore. Distinctio eaque, officiis
quaerat molestiae sed quis labore.
</p>
</div>
<div class="item">
<h3 class="item-name">Item1</h3>
<p class="item-desc">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur sequi fuga labore. Distinctio eaque, officiis
quaerat molestiae sed quis labore.
</p>
</div>
</section>
CSS - 我用过 flexbox
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.features {
display: flex;
flex-wrap: wrap;
}
.features .item {
/*flex: 0 0 100%;*/ /*remove if you don't want media query*/
max-width: 384px;/*add if you don't want media query*/
width: 100%;/*add if you don't want media query*/
padding: 0 1rem;
margin-bottom: 1rem;
}
/*remove if you don't want media query*/
/*@media (min-width: 768px) {
.features .item {
flex: 0 0 33.33%;
}
}*/
假设我有 3 个 div...
HTML:
<section class="features">
<div class="item">
<h3 class="item-name">Item1</h3>
<p class="item-desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur sequi fuga labore. Distinctio eaque, officiis quaerat molestiae sed quis labore.</p>
</div>
<div class="item">
<h3 class="item-name">Item1</h3>
<p class="item-desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur sequi fuga labore. Distinctio eaque, officiis quaerat molestiae sed quis labore.</p>
</div>
<div class="item">
<h3 class="item-name">Item1</h3>
<p class="item-desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur sequi fuga labore. Distinctio eaque, officiis quaerat molestiae sed quis labore.</p>
</div>
</section>
CSS:
.section {
display: flex;
flex-wrap: wrap;
}
所以我想要的是当我减小屏幕尺寸时让这些项目只在一列上换行...
The current behavior is like this on medium screen size
I want the behavior to be like this in all other screen sizes
你可以在媒体查询中调用它你想做这样的事情吗?请告诉我
section.features {
display: flex;
justify-content:space-around;
padding:10px;
}
@media only screen and (max-width:768px){
section.features {display: grid;}
}
RESIZE ME
<section class="features">
<div class="item">
<h3 class="item-name">Item1</h3>
<p class="item-desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur sequi fuga labore. Distinctio eaque, officiis quaerat molestiae sed quis labore.</p>
</div>
<div class="item">
<h3 class="item-name">Item1</h3>
<p class="item-desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur sequi fuga labore. Distinctio eaque, officiis quaerat molestiae sed quis labore.</p>
</div>
<div class="item">
<h3 class="item-name">Item1</h3>
<p class="item-desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur sequi fuga labore. Distinctio eaque, officiis quaerat molestiae sed quis labore.</p>
</div>
</section>
<section class="features">
<div class="item">
<h3 class="item-name">Item1</h3>
<p class="item-desc">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur sequi fuga labore. Distinctio eaque, officiis
quaerat molestiae sed quis labore.
</p>
</div>
<div class="item">
<h3 class="item-name">Item1</h3>
<p class="item-desc">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur sequi fuga labore. Distinctio eaque, officiis
quaerat molestiae sed quis labore.
</p>
</div>
<div class="item">
<h3 class="item-name">Item1</h3>
<p class="item-desc">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur sequi fuga labore. Distinctio eaque, officiis
quaerat molestiae sed quis labore.
</p>
</div>
</section>
CSS - 我用过 flexbox
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.features {
display: flex;
flex-wrap: wrap;
}
.features .item {
/*flex: 0 0 100%;*/ /*remove if you don't want media query*/
max-width: 384px;/*add if you don't want media query*/
width: 100%;/*add if you don't want media query*/
padding: 0 1rem;
margin-bottom: 1rem;
}
/*remove if you don't want media query*/
/*@media (min-width: 768px) {
.features .item {
flex: 0 0 33.33%;
}
}*/