前言
CSS布局是前端开发过程中的非常基础且关键的内容之一，以往实现复杂布局需要借助多种技术手段，如float, position等。这些手段虽然也能实现布局，但特定场景下会出现很多问题，使得样式表的维护成本大大增加。
而Flexbox布局在2010年提出并逐渐成为W3C推荐的布局方式，其在实现复杂、灵活的布局方面比传统布局方式更简单，更直观，更易于维护和扩展。本文将详细讲解CSS Flexbox布局，涉及相关技术概念、实现方式、语法规则等内容，希望对学习CSS布局的前端开发者提供帮助。
概述
Flexbox布局，也叫弹性布局，采用的是一维布局模式，将容器内部的项目（即flex items）进行布局，从而实现在不同设备分辨率下适应性更强的网页布局效果。在Flexbox布局中，有两种重要的元素：flex container和flex items。
- flex container：定义布局容器的盒子，在其中完成Flexbox布局
- flex items：布局容器内的子项，根据Flexbox规则在容器内排列
Flexbox布局特点：
- 可以实现垂直居中、弹性布局等多个需求。
- 相对position、float等传统布局方式更加简单，容易实现响应式布局。
- 将容器内部的项目进行布局，可以避免子元素越界的情况。
实现方式
实现Flexbox布局有两种方法：
- 通过flex属性设置容器内的子项
- 通过display属性设置布局容器
两种方法都有各自的特点，但本文将只介绍第二种方法。
语法规则
容器属性
- display
设置容器类型，将一个容器声明为Flexbox布局容器：
.container{
display: flex;
}- flex-direction
定义Flexbox主轴的方向，分为4个值，分别是：
- row：默认值，主轴为水平方向，起点在左端
- row-reverse：主轴为水平方向，起点在右端
- column：主轴为垂直方向，起点在上沿
- column-reverse：主轴为垂直方向，起点在下沿
.container{
display: flex;
flex-direction: row;
/*或flex-direction: row-reverse;*/
/*或flex-direction: column;*/
/*或flex-direction: column-reverse;*/
}- flex-wrap
指定容器内部flex item是否为单行或者多行。该属性有3个取值：
- nowrap：默认值，所有flex item在同一行上，超出容器范围部分隐藏。
.container{
display: flex;
flex-wrap: nowrap;
}- wrap：所有flex item在多行上，第一行在上方。
.container{
display: flex;
flex-wrap: wrap;
}- wrap-reverse：所有flex item在多行上，第一行在下方。
.container{
display: flex;
flex-wrap: wrap-reverse;
}- justify-content
定义Flexbox主轴上的flex items的对齐方式。该属性有5个取值：
- flex-start：默认值，flex items 左对齐。
.container{
display: flex;
justify-content: flex-start;
}- flex-end：flex items 右对齐。
.container{
display: flex;
justify-content: flex-end;
}- center：flex items 居中对齐。
.container{
display: flex;
justify-content: center;
}- space-between：flex items 宽度平均分配，flex items 间距相同。
.container{
display: flex;
justify-content: space-between;
}- space-around：flex items 宽度平均分配，每个flex item 与周围的item距离相等。
.container{
display: flex;
justify-content: space-around;
}- align-items
定义Flexbox横轴上的flex items的对齐方式。该属性有5个取值：
- stretch：默认值，flex items 将被拉伸到适应容器的高度或宽度。
.container{
display: flex;
align-items: stretch;
}- flex-start：flex items 顶部对齐。
.container{
display: flex;
align-items: flex-start;
}- flex-end：flex items 底部对齐。
.container{
display: flex;
align-items: flex-end;
}- center：flex items 居中对齐。
.container{
display: flex;
align-items: center;
}- baseline：flex items 基线对齐。
.container{
display: flex;
align-items: baseline;
}- align-content
定义容器内多根轴线的对齐方式。该属性有5个取值：
- stretch：默认值，轴线占据整个交叉轴。
.container{
display: flex;
align-content: stretch;
}- flex-start：轴线顶部对齐。
.container{
display: flex;
align-content: flex-start;
}- flex-end：轴线底部对齐。
.container{
display: flex;
align-content: flex-end;
}- center：轴线居中对齐。
.container{
display: flex;
align-content: center;
}- space-between：轴线平均分配，轴线间距相等。
.container{
display: flex;
align-content: space-between;
}- space-around：轴线平均分配，轴线两侧的距离与边框相等。
.container{
display: flex;
align-content: space-around;
}子项属性
- order
子项排列顺序。数值越小，排列越前面，默认为0。
.item{
order: 1;
}- flex-grow
子项放大比例，默认为0。
.item{
flex-grow: 2;
}- flex-shrink
子项缩小比例，默认为1。
.item{
flex-shrink: 3;
}- flex-basis
定义子项占据主轴空间的初始大小，默认为auto。
.item{
flex-basis: 100px;
}- flex
缩写属性，分别设置flex-grow、flex-shrink、flex-basis。
.item{
flex: 1 0 100px;
}- align-self
定义子项在侧轴上的对齐方式，如容器属性中的align-items。该属性只影响单个子项。该属性有5个取值：
- auto：默认值。
- stretch：子项被拉伸以适应容器。
- flex-start：子项顶部对齐。
- flex-end：子项底部对齐。
- center：子项居中对齐。
.item{
align-self: flex-end;
}示例代码
下面是一个基本的Flexbox布局：
<div class="container"> <div class="item item1">1</div> <div class="item item2">2</div> <div class="item item3">3</div> <div class="item item4">4</div> </div>
-- -------------------- ---- ------- ----------- -------- ----- ---------------- ------- ------------ ------- ------- ------ ----------- ----- - ------ ------ ------ ------- ------ ----------- ----- ------ ----- ----------- ------- ------------ ------ ---------- ----- ------------- ----- - ------- ----------- -------- - ------- ----------- -------- - ------- ----------- -------- - ------- ----------- -------- -
该示例中，首先设置容器为Flexbox布局，然后设置子项在容器中居中对齐。最后，每个子项设置同样的宽高，并在其中填入文本。
布局效果如下图：
总结
Flexbox布局是一种比较新的布局方式，其实现方法简单直接，可读性高、维护性强、布局灵活等优点，使其成为现代Web布局的标配之一。本文对Flexbox布局的相关概念、实现方式、语法规则进行了详细的介绍，并提供了示例代码供读者参考学习。建议开发者在实战中尝试，挖掘更多其它布局场景下的实现方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64734292968c7c53b00bec2e