在前端开发中，布局是一个非常重要的部分。随着移动设备的普及和屏幕尺寸的多样化，传统的布局方式已经无法满足我们的需求。Flexbox 布局应运而生，成为了一个非常流行的布局方式。本文将详细介绍 Flexbox 布局及其常用属性的解析。
什么是 Flexbox 布局
Flexbox 布局是一种基于弹性盒模型的布局方式。它可以让容器中的子元素按照一定的规则排列，可以实现非常灵活的布局效果。Flexbox 布局的特点包括：
- 父元素成为容器，子元素成为项目。
- 父元素的子元素可以按照指定的规则排列。
- 父元素可以控制子元素的排列方式、排列顺序、对齐方式等。
Flexbox 布局的基本概念
在介绍 Flexbox 布局的常用属性之前，我们需要先了解一些基本概念。
容器（Flex Container）
容器是指应用 Flexbox 布局的父元素，它的 display 属性设置为 flex 或 inline-flex。
项目（Flex Item）
项目是指容器中的子元素，它们的 display 属性默认为 flex。
主轴（Main Axis）
主轴是指 Flexbox 布局中的主要方向。在默认情况下，主轴是水平方向，从左到右排列。可以通过设置 flex-direction 属性来改变主轴的方向。
交叉轴（Cross Axis）
交叉轴是指 Flexbox 布局中的次要方向。在默认情况下，交叉轴是垂直方向，从上到下排列。可以通过设置 flex-direction 属性来改变交叉轴的方向。
主轴起点和终点（Main Start and Main End）
主轴起点和终点是指沿着主轴的起点和终点位置。在默认情况下，主轴起点是左侧，主轴终点是右侧。可以通过设置 justify-content 属性来改变主轴的对齐方式。
交叉轴起点和终点（Cross Start and Cross End）
交叉轴起点和终点是指沿着交叉轴的起点和终点位置。在默认情况下，交叉轴起点是顶部，交叉轴终点是底部。可以通过设置 align-items 或 align-self 属性来改变交叉轴的对齐方式。
Flexbox 布局常用属性解析
display
display 属性用于设置容器的显示方式。默认值为 flex。
.container {
display: flex;
}flex-direction
flex-direction 属性用于设置主轴的方向。默认值为 row，表示水平方向从左到右排列。
.container {
flex-direction: row;
}值有以下四种：
- row：水平方向从左到右排列。
- row-reverse：水平方向从右到左排列。
- column：垂直方向从上到下排列。
- column-reverse：垂直方向从下到上排列。
justify-content
justify-content 属性用于设置主轴上的对齐方式。默认值为 flex-start，表示从主轴起点开始排列。
.container {
justify-content: center;
}值有以下五种：
- flex-start：从主轴起点开始排列。
- flex-end：从主轴终点开始排列。
- center：居中排列。
- space-between：两端对齐，项目之间的间隔相等。
- space-around：每个项目的两侧间隔相等，项目之间的间隔比项目与边框的间隔大一倍。
align-items
align-items 属性用于设置交叉轴上的对齐方式。默认值为 stretch，表示拉伸项目以适应容器的高度。
.container {
align-items: center;
}值有以下五种：
- stretch：拉伸项目以适应容器的高度。
- flex-start：从交叉轴起点开始排列。
- flex-end：从交叉轴终点开始排列。
- center：居中排列。
- baseline：项目的基线对齐。
flex-wrap
flex-wrap 属性用于设置项目是否换行。默认值为 nowrap，表示不换行。
.container {
flex-wrap: wrap;
}值有以下三种：
- nowrap：不换行。
- wrap：换行，第一行在上方。
- wrap-reverse：换行，第一行在下方。
align-content
align-content 属性用于设置多行项目在交叉轴上的对齐方式。只有一行项目时，该属性无效。默认值为 stretch，表示拉伸项目以适应容器的高度。
.container {
align-content: center;
}值有以下六种：
- stretch：拉伸项目以适应容器的高度。
- flex-start：从交叉轴起点开始排列。
- flex-end：从交叉轴终点开始排列。
- center：居中排列。
- space-between：两端对齐，项目之间的间隔相等。
- space-around：每个项目的两侧间隔相等，项目之间的间隔比项目与边框的间隔大一倍。
flex-grow
flex-grow 属性用于设置项目的放大比例。默认值为 0，表示不放大。
.item {
flex-grow: 1;
}值为一个数字，代表放大比例。如果所有项目的 flex-grow 属性都为 1，则它们将平均分配剩余空间。
flex-shrink
flex-shrink 属性用于设置项目的缩小比例。默认值为 1，表示在空间不足时缩小。
.item {
flex-shrink: 1;
}值为一个数字，代表缩小比例。如果所有项目的 flex-shrink 属性都为 1，则它们将平均收缩。
flex-basis
flex-basis 属性用于设置项目的基准大小。默认值为 auto，表示由项目的内容决定。
.item {
flex-basis: 100px;
}值可以是一个长度、一个百分比或者关键字 auto。
flex
flex 属性用于设置项目的放大比例、缩小比例和基准大小。默认值为 0 1 auto。
.item {
flex: 1 1 100px;
}值可以是一个数字、一个长度、一个百分比或者关键字 auto。
示例代码
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div>
// javascriptcn.com 代码示例
.container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.item {
flex: 1 1 100px;
height: 50px;
line-height: 50px;
text-align: center;
background-color: #ccc;
margin: 5px;
}效果如下：
总结
Flexbox 布局是一种非常灵活的布局方式，可以实现各种复杂的布局效果。掌握 Flexbox 布局的常用属性，可以使我们更加高效地进行前端开发。希望本文对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650eb06395b1f8cacd7c1cd7