flex布局之一行显示4个,如果多于4个,自动换行

<div class="container">
     <div class="item" style="background-color: #f8b9b9">1</div>
    <div class="item" style="background-color: #f8300c">2</div>
    <div class="item" style="background-color: #85e159">3</div>
    <div class="item" style="background-color: #b9bcf8">4</div>
    <div class="item" style="background-color: #f3dede">5</div>
    <!-- 更多的.item元素 -->
</div>


.container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between; /* 可选的对齐方式 */
}

.item {
	flex: 0 0 25%; /* 每个子元素占据容器宽度的25% */
}

posted @ 2024-08-01 10:41  林财钦  阅读(319)  评论(0编辑  收藏  举报