css3 flexbox limit 4 items per row auto width

问题

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>

回答1:

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>

EDIT 18-OCT-2019 1909 UTC

I found out that best practice states using less than available in case of gutters. I have updated the code:

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

来源：https://stackoverflow.com/questions/45104834/css3-flexbox-limit-4-items-per-row-auto-width

标签

html

css

html5

css3

flexbox