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

从这个回购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日至7月082日

使用此方法显示每行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>