前言
前端工程师常常需要实现让多个元素在同一容器内水平等距排列的需求，应用场景涵盖了很多经典的UI设计元素，如标签页、按钮组、导航栏等等。在CSS出现之前，我们只能用table元素来实现等宽并排布局，但table带来的一些样式和语义问题使得它并不是最佳的实践。随着CSS3 Flexbox Module 的普及，我们可以使用flex盒子模型来实现这些布局需求，本文就介绍一些利用CSS Flexbox 实现等宽并排布局的最佳实践。
CSS Flexbox 盒子模型介绍
CSS 弹性盒子布局模型(Flexbox)是W3C CSS工作组于2009年提出的一种新的盒子模型，它可以在不使用浮动和定位的前提下实现复杂的布局，并且可以方便地实现响应式设计。Flexbox 容器可以通过指定flex属性来控制容器内各个子元素的行为，从而实现各种布局情况。
简单的 flex 布局
下面我们将以一个非常基础的 flex 布局为例，介绍flex盒子模型的一些基本概念：
<div class="container"> <div class="item">item1</div> <div class="item">item2</div> <div class="item">item3</div> </div>
.container {
display: flex;
}上面的代码表示：
- 对
.container元素设置display:flex;属性，即将.container元素设置为一个flex容器； flex容器默认的主轴方向是水平方向，横向排列各子元素。
等宽并排布局是flex布局的一种特殊场景，我们需要让每个子元素都占据同样的宽度，并水平等距排列。下面我们将介绍一些实现等宽并排布局的最佳实践。
实现等宽
实现等宽的关键是要让每个子元素都占据同样的宽度。我们可以利用flex盒子模型的flex-grow属性来实现等宽效果，具体做法是将其值设为1，这样每个子元素都会被分配到同样比例的宽度。
.item {
flex-grow: 1;
}上面代码表示设置.item元素的flex-grow属性为1，让每个子元素都可伸缩并平分剩余空间，从而实现等宽效果。
实现水平等距排列
实现水平等距排列的关键是要用到justify-content属性。justify-content属性是用来设置主轴方向上的对齐方式的，其值分别为flex-start、flex-end、center、space-between以及space-around五种。
我们可以使用space-between属性来实现水平等距排列，具体做法是设置容器的justify-content属性为 space-between：
.container {
justify-content: space-between;
}上面代码表示将.container元素的justify-content属性设置为space-between，使得容器主轴方向上的各子元素都分别分布在容器的两端，从而实现水平等距排列。
实战应用举例
我们可以结合Flexbox盒子模型和上述两点说明，来实现诸如“导航条”、“Tab bar”这类常见的等宽并排布局。
<ul class=”nav”> <li class=”nav-item”>首页</li> <li class=”nav-item”>产品中心</li> <li class=”nav-item”>技术博客</li> <li class=”nav-item”>关于我们</li> </ul>
-- -------------------- ---- ------- ---- - -------- ----- ---------------- -------------- -------- -- ------- -- ----------- ----- - --------- - ---------- -- -------- ---- ----- -------------- --- ----- ----- ------ ----- ----------- ------- -
上面代码对导航条进行了等宽并排布局的实现，同时设置了标签页的底部边框效果以及其他的样式。
总结
通过本文，我们了解了CSS Flexbox模型和等宽并排布局的一些实现技巧和最佳实践。Flexbox模型具有丰富的特性和优点，可以方便地实现复杂的布局。等宽并排布局是CSS布局中的一个非常经典的应用场景，我们可以利用CSS Flexbox模型来实现这一需求，进而提高了开发效率和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6530ba3f7d4982a6eb249078