CSS 一行三列布局，可换行（含grid网格布局、flex弹性布局/inline-block布局 + 伪类选择器）

本文主要是介绍CSS 一行三列布局，可换行（含grid网格布局、flex弹性布局/inline-block布局 + 伪类选择器），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

效果

一、HTML

<div class="num-wrap"><div class="num-item" v-for="num in 8" :key="num">{{ num }}</div></div>

二、CSS

1、grid网格布局（推荐）

.num-wrap {// grid网格布局display: grid;grid-template-columns: repeat(3, 1fr);gap: 10px 10px;
}.num-item {background-color: #CB812E;color: #ffffff;height: 80px;
}

2、flex弹性布局 + 伪类选择器

.num-wrap {// flex弹性布局display: flex;flex-wrap: wrap;
}.num-item {background-color: #CB812E;color: #ffffff;height: 80px;width: calc((100% - 20px) / 3);margin-right: 10px;margin-top: 10px;
}// 使用css 伪类选择器
.num-item:nth-child(3n) {margin-right: 0;
}

3、inline-block布局 + 伪类选择器

.num-wrap {// inline-block布局width: 100%;text-align: left;
}.num-item {background-color: #CB812E;color: #ffffff;height: 80px;width: calc((100% - 20px) / 3);margin-right: 10px;margin-top: 10px;text-align: center;display: inline-block;
}// 使用css 伪类选择器
.num-item:nth-child(3n) {margin-right: 0;
}

注：inline-block 可替换成 inline-grid / inline-table / inline-flex(inline-flex额外加上justify-content: space-around / space-evenly)

这篇关于CSS 一行三列布局，可换行（含grid网格布局、flex弹性布局/inline-block布局 + 伪类选择器）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---