Flexbox通过设置display:flex实现弹性布局，利用justify-content和align-items可轻松实现垂直居中，需设定容器高度；flex-grow、flex-shrink、flex-basis控制项目空间分配，常以flex简写使用；适用于导航栏、卡片、表单等一维布局场景，与Grid互补，前者擅长单轴布局，后者适合二维网格。
CSS 弹性布局，也称为 Flexbox，是一种强大的 CSS 布局模块，它提供了一种更有效的方式来对容器内的项目进行对齐、方向和排序，即使它们的大小未知或动态变化。简单来说，它能让你轻松控制元素在页面上的排列方式。
Flexbox 的核心概念是弹性容器（flex container）和弹性项目（flex items）。你需要先将一个元素设置为弹性容器，然后它的直接子元素就会变成弹性项目。
flex容器的主要属性：
-
display: flex;
或
display: inline-flex;
：将元素定义为块级或行内弹性容器。
-
flex-direction: row | column | row-reverse | column-reverse;
：定义主轴的方向。
-
flex-wrap: nowrap | wrap | wrap-reverse;
：定义弹性项目是否以及如何换行。
-
flex-flow: <flex-direction> <flex-wrap>;
：
flex-direction
和
flex-wrap
的简写属性。
-
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
：定义项目在主轴上的对齐方式。
-
align-items: stretch | flex-start | flex-end | center | baseline;
：定义项目在交叉轴上的对齐方式。
-
align-content: stretch | flex-start | flex-end | center | space-between | space-around;
：当有多行弹性项目时，定义行在交叉轴上的对齐方式。
flex项目的属性：
立即学习“前端免费学习笔记（深入）”；
-
order: <number>;
：定义项目的排列顺序。
-
flex-grow: <number>;
：定义项目相对于其他弹性项目的增长系数。
-
flex-shrink: <number>;
：定义项目相对于其他弹性项目的收缩系数。
-
flex-basis: <length> | auto;
：定义项目在分配多余空间之前，沿着主轴的初始大小。
-
flex: <flex-grow> <flex-shrink> <flex-basis>;
：
flex-grow
、
flex-shrink
和
flex-basis
的简写属性。
-
align-self: auto | stretch | flex-start | flex-end | center | baseline;
：允许单个弹性项目覆盖
align-items
属性。
如何使用 Flexbox 实现垂直居中？
这是 Flexbox 最常见的用例之一。以往实现垂直居中可能需要一些技巧，但 Flexbox 让它变得非常简单。
只需将父元素设置为弹性容器，并使用
justify-content: center
和
align-items: center
即可。例如：
.container { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ height: 300px; /* 必须设置高度，否则垂直居中无效 */ }
这段代码会将
.container
内的所有直接子元素在水平和垂直方向上都居中。记住，你需要为容器设置一个明确的高度，否则垂直居中可能不会生效。
Flexbox 的
flex-grow
flex-grow
、
flex-shrink
和
flex-basis
属性有什么作用？
这三个属性共同控制着弹性项目如何分配空间。
-
flex-grow
：指定弹性项目相对于容器中其他弹性项目应该增长多少。如果所有项目的
flex-grow
都设置为 1，那么它们将平分剩余空间。如果一个项目的
flex-grow
设置为 2，而其他项目设置为 1，那么该项目将占据两倍的空间。
-
flex-shrink
：指定弹性项目在空间不足时应该收缩多少。如果所有项目的
flex-shrink
都设置为 1，那么它们将以相同的比例收缩。如果一个项目的
flex-shrink
设置为 0，那么它将不会收缩。
-
flex-basis
：指定弹性项目在分配多余空间之前的初始大小。它可以是长度值（例如
px
、
em
），也可以是
auto
。如果设置为
auto
，则项目的大小将基于其内容。
通常，你会使用
flex
属性作为这三个属性的简写。例如，
flex: 1 1 auto;
等同于
flex-grow: 1; flex-shrink: 1; flex-basis: auto;
。
Flexbox 布局在实际项目中的应用场景有哪些？
Flexbox 在各种场景中都非常有用。
-
导航栏： 可以轻松创建响应式的导航栏，其中链接均匀分布，并且在屏幕尺寸较小时可以折叠成菜单。
-
卡片布局： 可以用于创建卡片式布局，其中卡片的大小和位置可以根据内容自动调整。
-
表单布局： 可以用于创建复杂的表单布局，其中标签和输入框可以灵活对齐。
-
媒体对象： 可以用于创建媒体对象（例如，图像和文本的组合），其中图像和文本可以垂直或水平对齐。
-
网格布局的补充： 虽然 CSS Grid 布局更适合复杂的二维布局，但 Flexbox 在一维布局中仍然非常有用，并且可以与 Grid 结合使用。
一个简单的例子，假设你要创建一个包含三个等宽列的布局：
<div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div>
.container { display: flex; } .item { flex: 1; /* 所有项目平分空间 */ border: 1px solid black; padding: 10px; }
这段代码会将
.container
内的三个
.item
元素平均分配容器的宽度。
Flexbox 和 Grid 布局有什么区别，应该如何选择？
Flexbox 主要用于一维布局，即沿着一个轴（行或列）排列项目。Grid 布局则用于二维布局，即同时沿着行和列排列项目。
选择哪个取决于你的需求。如果你的布局主要是在一个方向上排列项目，那么 Flexbox 可能更适合。如果你的布局需要在多个方向上排列项目，并且需要更复杂的网格结构，那么 Grid 布局可能更适合。
实际上，Flexbox 和 Grid 可以结合使用。你可以使用 Grid 创建整体的页面结构，然后使用 Flexbox 在 Grid 单元格内进行更精细的布局。
例如，你可以使用 Grid 创建一个包含页眉、侧边栏和主要内容的布局，然后使用 Flexbox 在页眉中对齐导航链接，或者在侧边栏中排列列表项。
以上就是CSScss教程 css ai 区别 弹性布局 排列 垂直居中 css auto Length number 对象 display column flex