小编B.V*_*B.V的帖子

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

我如何使用 Flexbox 来实现这一点？目前，我正在使用 table，但我将每一行包装在一个 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;
	}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

html css flexbox

B.V*_*B.V

2017 07-14

2
推荐指数

1
解决办法

9987
查看次数