CSS Flexbox 布局是一种现代的、响应式的布局模式，可以帮助我们更好地控制网页布局，实现更复杂的页面设计。该布局模式基于“弹性容器”和“弹性项目”来实现，提供了一系列属性和方法来实现各种排列方式和大小调整。本文将从以下几个方面介绍 CSS Flexbox 布局：基本概念、实现方法、常用属性及其作用、实例演示。
基本概念
弹性容器
弹性容器是指使用 Flexbox 布局的 HTML 元素，可以通过设置其 display 属性为 flex 或 inline-flex 来实现。弹性容器内部包含了一系列弹性项目，可以通过设置不同的属性和方法来实现各种排列方式和大小调整。
弹性项目
弹性项目指的是弹性容器内部的 HTML 元素，可以通过设置其不同的布局属性和属性值来实现不同的排列方式和大小调整。弹性项目分为主轴和交叉轴两个方向，可以通过设置不同的属性和方法来实现水平或竖直方向上的排列。
主轴和交叉轴
主轴指的是弹性容器内部的水平方向，通常用于控制弹性项目的排列方式；交叉轴指的是弹性容器内部的竖直方向，通常用于控制弹性项目在交叉轴上的大小和位置。
实现方法
要使用 CSS Flexbox 布局，需要设置弹性容器的 display 属性为 flex 或 inline-flex，然后设置不同的属性和属性值来实现不同的排列方式和大小调整。
.container {
display: flex;
/* 其他属性和属性值 */
}常用属性及其作用
flex-direction
该属性用于设置弹性容器的排列方向，可以设置为 row、row-reverse、column、column-reverse 四种值，分别表示水平从左往右、水平从右往左、竖直从上往下、竖直从下往上。
.container {
flex-direction: row | row-reverse | column | column-reverse;
}flex-wrap
该属性用于设置弹性项目是否换行，可以设置为 nowrap、wrap、wrap-reverse 三种值，分别表示不换行、换行、反向换行。默认情况下，弹性项目会尽可能占用可用空间，但如果弹性容器空间不足，弹性项目将会缩小。
.container {
flex-wrap: nowrap | wrap | wrap-reverse;
}flex-flow
该属性可以同时设置 flex-direction 和 flex-wrap 两个属性，用于简化代码。
.container {
flex-flow: <flex-direction> <flex-wrap>;
}justify-content
该属性用于设置弹性项目在主轴上的排列方式，可以设置为 flex-start、flex-end、center、space-between、space-around 五种值，分别表示靠左对齐、靠右对齐、居中对齐、两端对齐、等间距对齐。默认情况下，弹性项目是靠左对齐排列的。
.container {
justify-content: flex-start | flex-end | center | space-between | space-around;
}align-items
该属性用于设置弹性项目在交叉轴上的对齐方式，可以设置为 flex-start、flex-end、center、baseline、stretch 五种值，分别表示垂直向上对齐、垂直向下对齐、居中对齐、基准线对齐、拉伸对齐。默认情况下，弹性项目是在交叉轴方向上拉伸对齐的。
.container {
align-items: flex-start | flex-end | center | baseline | stretch;
}align-content
该属性用于设置弹性容器内多行弹性项目在交叉轴上的对齐方式，可以设置为 flex-start、flex-end、center、space-between、space-around、stretch 六种值，分别表示垂直向上对齐、垂直向下对齐、居中对齐、两端对齐、等间距对齐、拉伸对齐。如果弹性容器内只有一行弹性项目，则该属性无效。
.container {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}flex
该属性用于设置弹性项目的伸缩性，包括伸缩比例、伸缩基准值和伸缩压缩因子。默认情况下，弹性项目的伸缩比例为 0，伸缩基准值为原始尺寸，伸缩压缩因子为 1。
.item {
flex: <flex-grow> <flex-shrink> <flex-basis>;
}其中 flex-grow 表示伸缩比例，设置为大于 0 的数值，表示在剩余空间分配伸缩比例；flex-shrink 表示伸缩压缩因子，设置为大于 0 的数值，表示在空间不足时伸缩的压缩因子；flex-basis 表示伸缩基准值，可以设置为固定宽度或百分比值。
实例演示
以下是几个实例演示，通过设置不同的 CSS Flexbox 布局属性来实现不同的排列方式和大小调整。
1.水平居中和垂直居中
本实例演示了如何使用 CSS Flexbox 布局实现水平和垂直居中。首先设置弹性容器的 justify-content 属性为 center，表示水平居中对齐；然后设置弹性容器的 align-items 属性为 center，表示垂直居中对齐。最后设置弹性容器内的宽高为 100px，使得弹性项目可以水平和垂直居中。
<div class="container"> <div class="item"></div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- ------- ------------ ------- ------ ----- ------- ------ - ----- - ------ ------ ------- ------ ----------------- ----- -
2.等间距排列和自适应宽度
本实例演示了如何使用 CSS Flexbox 布局实现等间距排列和自适应宽度。首先设置弹性容器的 justify-content 属性为 space-between，表示等间距对齐；然后设置弹性项目的 flex-grow 属性为 1，表示弹性项目自适应宽度。最后设置弹性项目的宽度为 100px，并将其包裹在弹性容器中。
<div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- -------------- ------ ----- - ----- - ---------- -- ------ ------ ------- ------ ----------------- ----- ------------- ----- - ---------------- - ------------- -- -
3.多行自适应布局和弹性压缩因子
本实例演示了如何使用 CSS Flexbox 布局实现多行自适应布局和弹性压缩因子。首先设置弹性容器的 flex-wrap 属性为 wrap，表示弹性项目自动换行；然后设置弹性项目的 flex-basis 属性为 200px，表示弹性项目的基准宽度为 200px，如果弹性容器空间不足，弹性项目将会缩小。最后设置弹性项目的 flex-shrink 属性为 1，表示弹性项目可以缩小，但是会按照 1:1 的比例进行压缩。
<div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------- ----- ---------------- ------- ------------ ------- ------ ----- ------- ------ - ----- - ----------- ------ ------------ -- ------- ------ ----------------- ----- ------- ----- -
总结
CSS Flexbox 布局是一种现代的、响应式的布局模式，可以帮助我们更好地控制网页布局，实现更复杂的页面设计。通过设置弹性容器和弹性项目的不同属性和方法，可以实现不同的排列方式和大小调整。本文介绍了 CSS Flexbox 布局的基本概念、实现方法、常用属性及其作用以及实例演示，希望能够详细介绍该布局模式的学习和指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64aa829048841e98946a2251