css3 flexbox 限制每行 4 个项目自动宽度

Question

如何使用 flexbox 实现这一点？目前，我正在使用表格，但我将每一行包装在一个 div 中以将其限制为 5 个项目。我想要所有的物品都只包裹在一个父母中。

我尝试了 flexbox，但我希望项目的宽度取决于其内容。谢谢各位。

.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>

Answer 1

从这个 repo 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;
    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>

编辑 2017 年 7 月 14 日 0829 UTC

使用此方法更好地显示每行 5 个的限制，但仍受其内容的宽度控制：

 
* {
    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>

编辑 18-OCT-2019 1909 UTC

我发现最佳实践表明在排水沟的情况下使用少于可用的。我已经更新了代码：

* {
    box-sizing: border-box;
}

.flexContainer {
    display: flex;
    flex-wrap: wrap;
}
.flexContainer .item {
    padding: 5px;
    flex: 1 1 17%;
}
.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>