css3 flexbox限制每行自动宽度4项 [英] css3 flexbox limit 4 items per row auto width
本文介绍了css3 flexbox限制每行自动宽度4项的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何使用flexbox来实现这个功能？目前，我正在使用表格，但我把每一行都封装在一个div中，以限制它只有5个项目。我想所有的项目只包装在一个父母。
我试过flexbox，但我想项目的宽度取决于其内容。谢谢大家。
.flexContainer {display：flex; flex-flow：排行; } .flexContainer .item {padding：5px; flex：1 1 auto; } .flexContainer .item a {display：block;背景：蓝色; text-align：center; }
< div class =flexContainer> < div class =item>< a href => sdfsf< / a>< / div> < div class =item>< a href => dffdfdf< / a>< / div> < div class =item>< a href => fdfdfd< / a>< / div> < div class =item>< a href => fdfdgdf< / a>< / div> < div class =item>< a href => ffffffffff< / a>< / div> < div class =item>< a href => fdfdfdg< / a>< / div> < div class =item>< a href => dddddddddddddd< / a>< / div> < div class =item>< a href => fdfdfdsd< / a>< / div> < div class =item>< a href => dsds< / a>< / div> < div class =item>< a href => dffdfdfdsf< / a>< / div> < div class =item>< a href => dffdfdfsdsds< / a>< / div> < div class =item>< a href => dffdfdfssdsfd< / a>< / div> < div class =item>< a href => dfsddfdfdf< / a>< / div> < div class =item>< a href => dff< / a>< / div> < div class =item>< a href => dffdfdfdffdfdfdffdfdf< / a>< / div>< / div> 从这个回购评判
front-end / project_files / css / flexbox_max_items_per_row.htmlrel =nofollow noreferrer> https://antibland.github.io/front-end/project_files/css/flexbox_max_items_per_row.html ，看起来你可以在你的CSS中执行以下操作：
CSS：
* {
box-sizing：border-box;
}
.flexContainer {
display：flex;
flex-wrap：wrap;
}
.flexContainer .item {
padding：5px;
flex：1 1 20％;
}
这样可以达到理想的效果。
* {box-sizing：border-box; } .flexContainer {display：flex; flex-wrap：wrap; } .flexContainer .item {padding：5px; flex：1 1 20％; } .flexContainer .item a {display：block;背景：蓝色; text-align：center; }
< div class =flexContainer> < div class =item>< a href => sdfsf< / a>< / div> < div class =item>< a href => dffdfdf< / a>< / div> < div class =item>< a href => fdfdfd< / a>< / div> < div class =item>< a href => fdfdgdf< / a>< / div> < div class =item>< a href => ffffffffff< / a>< / div> < div class =item>< a href => fdfdfdg< / a>< / div> < div class =item>< a href => dddddddddddddd< / a>< / div> < div class =item>< a href => fdfdfdsd< / a>< / div> < div class =item>< a href => dsds< / a>< / div> < div class =item>< a href => dffdfdfdsf< / a>< / div> < div class =item>< a href => dffdfdfsdsds< / a>< / div> < div class =item>< a href => dffdfdfssdsfd< / a>< / div> < div class =item>< a href => dfsddfdfdf< / a>< / div> < div class =item>< a href => dff< / a>< / div> < div class =item>< a href => dffdfdfdffdfdfdffdfdf< / a>< / div>< / div>
$ b 编辑14-Jul-2017 0829 UTC
使用这种方法显示更好的5行每行的限制，但仍然是由他们的内容的宽度控制：
$ b
* {box-sizing：border-box; } .flexContainer {display：flex; flex-wrap：wrap; } .flexContainer .item {padding：5px; flex：1 1 20％; } .flexContainer .item a {display：block;背景：蓝色; text-align：center; }
< div class =flexContainer> < div class =item>< a href =>我们很短< / a>< / div> < div class =item>< a href =>我们很短< / a>< / div> < div class =item>< a href =>我们很短< / a>< / div> < div class =item>< a href =>我们很短< / a>< / div> < div class =item>< a href =>我们很短< / a>< / div> < div class =item>< a href =>我们有点大< / a>< / div> < div class =item>< a href =>我们有点大< / a>< / div> < div class =item>< a href =>我们有点大< / a>< / div> < div class =item>< a href =>我们有点大< / a>< / div> < div class =item>< a href =>我们相当大一点< / a>< / div> < div class =item>< a href =>我们相当大一点< / a>< / div> < div class =item>< a href =>我们相当大一点< / a>< / div> < div class =item>< a href =>我们是最大的divs< / a>< / div> < div class =item>< a href =>我们是最大的divs< / a>< / div> < div class =item>< a href =>< / div>< / $ c我是所有div的爸爸$ c>
How can I achieve this using flexbox? Currently, I am using table but I wrap every row in a div to limit it to 5 items only. I want all the items wrapped in one parent only.
I tried flexbox but I want the items width depends on its content. Thank you guys.
.flexContainer {
display: flex;
flex-flow: row wrap;
}
.flexContainer .item {
padding: 5px;
flex: 1 1 auto;
}
.flexContainer .item a {
display: block;
background: blue;
text-align: center;
}
<div class="flexContainer">
<div class="item"><a href="">sdfsf</a></div>
<div class="item"><a href="">dffdfdf</a></div>
<div class="item"><a href="">fdfdfd</a></div>
<div class="item"><a href="">fdfdgdf</a></div>
<div class="item"><a href="">ffffffffff</a></div>
<div class="item"><a href="">fdfdfdg</a></div>
<div class="item"><a href="">dddddddddddddd</a></div>
<div class="item"><a href="">fdfdfdsd</a></div>
<div class="item"><a href="">dsds</a></div>
<div class="item"><a href="">dffdfdfdsf</a></div>
<div class="item"><a href="">dffdfdfsdsds</a></div>
<div class="item"><a href="">dffdfdfssdsfd</a></div>
<div class="item"><a href="">dfsddfdfdf</a></div>
<div class="item"><a href="">dff</a></div>
<div class="item"><a href="">dffdfdfdffdfdfdffdfdf</a></div>
</div>
解决方案 Judging from this repo https://antibland.github.io/front-end/project_files/css/flexbox_max_items_per_row.html, it looks like you could do the following in your css:
CSS:
* {
box-sizing: border-box;
}
.flexContainer {
display: flex;
flex-wrap: wrap;
}
.flexContainer .item {
padding: 5px;
flex: 1 1 20%;
}
And this would achieve the desired effect.
* {
box-sizing: border-box;
}
.flexContainer {
display: flex;
flex-wrap: wrap;
}
.flexContainer .item {
padding: 5px;
flex: 1 1 20%;
}
.flexContainer .item a {
display: block;
background: blue;
text-align: center;
}
<div class="flexContainer">
<div class="item"><a href="">sdfsf</a></div>
<div class="item"><a href="">dffdfdf</a></div>
<div class="item"><a href="">fdfdfd</a></div>
<div class="item"><a href="">fdfdgdf</a></div>
<div class="item"><a href="">ffffffffff</a></div>
<div class="item"><a href="">fdfdfdg</a></div>
<div class="item"><a href="">dddddddddddddd</a></div>
<div class="item"><a href="">fdfdfdsd</a></div>
<div class="item"><a href="">dsds</a></div>
<div class="item"><a href="">dffdfdfdsf</a></div>
<div class="item"><a href="">dffdfdfsdsds</a></div>
<div class="item"><a href="">dffdfdfssdsfd</a></div>
<div class="item"><a href="">dfsddfdfdf</a></div>
<div class="item"><a href="">dff</a></div>
<div class="item"><a href="">dffdfdfdffdfdfdffdfdf</a></div>
</div>
EDIT 14-JULY-2017 0829 UTC
To show a little better the limit of 5 per row using this method, but still being controlled by the width of their content:
* {
box-sizing: border-box;
}
.flexContainer {
display: flex;
flex-wrap: wrap;
}
.flexContainer .item {
padding: 5px;
flex: 1 1 20%;
}
.flexContainer .item a {
display: block;
background: blue;
text-align: center;
}
<div class="flexContainer">
<div class="item"><a href="">we're short</a></div>
<div class="item"><a href="">we're short</a></div>
<div class="item"><a href="">we're short</a></div>
<div class="item"><a href="">we're short</a></div>
<div class="item"><a href="">we're short</a></div>
<div class="item"><a href="">we are a bit bigger</a></div>
<div class="item"><a href="">we are a bit bigger</a></div>
<div class="item"><a href="">we are a bit bigger</a></div>
<div class="item"><a href="">we are a bit bigger</a></div>
<div class="item"><a href="">we are quite a bit bigger</a></div>
<div class="item"><a href="">we are quite a bit bigger</a></div>
<div class="item"><a href="">we are quite a bit bigger</a></div>
<div class="item"><a href="">we are the biggest divs yet</a></div>
<div class="item"><a href="">we are the biggest divs yet</a></div>
<div class="item"><a href="">I am the daddy of all the divs on this page.</a></div>
</div>
这篇关于css3 flexbox限制每行自动宽度4项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
