引言
在前端开发中，经常需要实现水平排列的等宽元素，常用的有 float、 display:inline-block 等方式，但是这些方式有些问题，比如 float 会导致父元素高度塌陷，display:inline-block 在加入多余空格或换行的情况下会出现间隔，同时这些方式对响应式布局支持不佳。而 Flexbox 布局则是一种非常适合响应式布局的方式，可以方便地实现水平排列的等宽元素，本文将重点介绍如何使用 Flexbox 布局实现水平排列的等宽元素。
Flexbox 布局简介
Flexbox 布局是一种 CSS3 弹性布局模型，它利用“弹性盒子”这种特殊的容器来实现布局和排列元素，被广泛应用于响应式布局的实现中，而且具有一定的浏览器兼容性，常用的浏览器基本支持 Flexbox 布局。
Flexbox 布局主要由容器（Container）和项目（Item）两部分组成，容器用于包含项目，根据设置的各种属性实现相应的布局效果。
Flexbox 布局的基本属性
在使用 Flexbox 布局时，需要使用以下几个基本属性：
- display:flex：表示该元素使用 Flexbox 布局。
- flex-direction：表示项目排列的方向，包括 row（默认值，表示水平方向）、column（表示垂直方向）、row-reverse（表示水平方向，但是从右到左）和 column-reverse（表示垂直方向，但是从下到上）。
- justify-content：表示项目在主轴上的对齐方式，包括 flex-start（默认值，表示起点对齐）、flex-end（表示终点对齐）、center（表示居中对齐）、space-between（表示两端对齐且项目之间平均分配空间）和 space-around（表示每个项目两侧平均分配空间）。
- align-items：表示项目在交叉轴上的对齐方式，包括 flex-start（表示起点对齐）、flex-end（表示终点对齐）、center（表示居中对齐）、baseline（表示以基线对齐）、stretch（默认值，表示延伸至交叉轴的边界）。
- flex-grow：表示项目在分配剩余空间时的放大比例，默认为0。
- flex-shrink：表示项目在空间不足时的缩小比例，默认为1。
实现水平排列的等宽元素
使用 Flexbox 布局实现水平排列的等宽元素非常简单，只需要将容器的 display 属性设置为 flex，并且设置 flex-wrap 属性为 nowrap（不换行），然后再将项目的 flex 属性设置为 1，就可以实现水平排列的等宽元素。以下是示例代码：
-- -------------------- ---- ------- ---- ------------------ ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ------ ---------- - -------- ----- ---------- ------- - ----- - ----- -- -
在上面的示例代码中，我们使用了 .container 作为容器，设置了 display：flex 和 flex-wrap：nowrap 两个属性，这样可以保证项目不会换行。而在 .item 类名的样式设置中，我们使用了 flex: 1 属性，这样可以保证每个项目在容器内平均分配空间，从而实现水平排列的等宽元素。
实现水平排列的不等宽元素
如果要实现水平排列的不等宽元素时，我们可以使用 min-width 属性来限制最小宽度，并在适当的位置设置 margin 属性来实现间距。以下是示例代码：
-- -------------------- ---- ------- ---- ------------------ ---- -------------------- ------- ---- -------------------- ------- ---- -------------------- ------- ---- -------------------- ------- ---- -------------------- ------- ------ ---------- - -------- ----- ---------------- -------------- ------------ ------- - ----- - ---------- ------ ------------- ----- - ---------------- - ------------- -- -
在上面的示例代码中，我们使用了 justify-content：space-between 属性，将每个项目平均分配在容器内，并且使用 align-items：center 属性将每个项目居中对齐。而在 .item 类名的样式设置中，我们使用了 min-width：100px 和 margin-right：10px 两个属性，来设置每个项目的大小和间距，最后使用 :last-child 选择器，将最后一个项目的 margin-right 属性设置为 0，以避免多余的间距。
结论
使用 Flexbox 布局可以非常方便地实现水平排列的等宽/不等宽元素，而且支持响应式布局，可以根据屏幕尺寸自动调整布局效果。在实际开发中，我们可以结合实际需求选择合适的属性和样式，来实现满足需求的布局效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6731110eeedcc8a97c93b069