什么是 CSS Flexbox 布局
CSS Flexbox 布局是一种弹性盒子布局模型，可以让我们更加方便地进行页面布局。它通过将容器中的元素排列为单个行或列来创建布局，同时可以在元素之间创建弹性空间。
Flexbox 布局是一个相对简单的布局模型，但它可以让我们更好地控制页面上的元素，特别是在响应式设计中，它能够让我们更好地适应不同的屏幕尺寸。
Flexbox 的基本概念
Flexbox 包含两个基本概念：容器和项目。
容器
容器是 Flexbox 布局的最外层元素，它包含了所有的 Flexbox 项目。容器可以通过设置 display: flex 或 display: inline-flex 来启用 Flexbox 布局。
.container {
display: flex;
}项目
项目是容器中的每个元素，它们按照一定的规则排列在容器中。每个项目都有自己的尺寸、位置和顺序。
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div>
.container {
display: flex;
}
.item {
width: 100px;
height: 100px;
background-color: #ccc;
}Flexbox 的主轴和侧轴
Flexbox 布局中有两个重要的概念：主轴和侧轴。
主轴
主轴是 Flexbox 布局中的一个重要概念，它是指 Flexbox 项目在容器中排列的方向。默认情况下，主轴是水平方向，也就是从左到右排列。
.container {
display: flex;
/* 主轴方向为水平方向 */
flex-direction: row;
}侧轴
侧轴是指与主轴垂直的轴线。在默认情况下，侧轴是竖直方向，也就是从上到下排列。
.container {
display: flex;
/* 主轴方向为水平方向，侧轴方向为竖直方向 */
flex-direction: row;
}Flexbox 的常用属性
flex-direction
flex-direction 属性用于设置 Flexbox 项目的排列方向。默认值为 row，也就是从左到右排列。
.container {
display: flex;
/* 从右到左排列 */
flex-direction: row-reverse;
}justify-content
justify-content 属性用于设置 Flexbox 项目在主轴上的对齐方式。
.container {
display: flex;
/* 居中对齐 */
justify-content: center;
}align-items
align-items 属性用于设置 Flexbox 项目在侧轴上的对齐方式。
.container {
display: flex;
/* 居中对齐 */
align-items: center;
}flex-wrap
flex-wrap 属性用于设置 Flexbox 项目是否换行。默认情况下，Flexbox 项目不换行，而是在一行中排列。
.container {
display: flex;
/* 换行 */
flex-wrap: wrap;
}flex-grow
flex-grow 属性用于设置 Flexbox 项目在空间分配时的扩展比例。
.item {
/* 宽度为 100px，当空间有剩余时，会分配给 flex-grow 的项目 */
width: 100px;
/* 扩展比例为 1 */
flex-grow: 1;
}flex-shrink
flex-shrink 属性用于设置 Flexbox 项目在空间不足时的收缩比例。
.item {
/* 宽度为 100px，当空间不足时，会收缩 */
width: 100px;
/* 收缩比例为 1 */
flex-shrink: 1;
}Flexbox 的应用示例
水平居中
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div>
.container {
display: flex;
justify-content: center;
}垂直居中
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div>
.container {
display: flex;
align-items: center;
}等分布局
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div>
.container {
display: flex;
}
.item {
/* 等分布局 */
flex: 1;
}总结
CSS Flexbox 布局是一种弹性盒子布局模型，可以让我们更加方便地进行页面布局。通过掌握 Flexbox 的基本概念和常用属性，我们可以轻松实现各种不同的布局效果。在实际项目中，我们可以结合 CSS Grid 布局和传统的盒模型布局来实现更加灵活和多样化的页面布局。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6587d1a1eb4cecbf2dd0bc18