CSS的Flex布局（也称为弹性盒模型布局）是一种现代的布局方式，它为设计师和开发者提供了一种高效、灵活的方式来对齐和分配空间在容器中的项目，无论它们的大小或动态内容如何。
以下是一些关于Flex布局的基本知识和如何使用它的关键点：
1. 启用Flex布局
要将一个容器设置为Flex容器，你需要在其上设置display属性为flex或inline-flex。
.container {
display: flex;
}
2. Flex方向
你可以使用flex-direction属性来定义主轴的方向（项目的排列方向）。可选的值有：
row（默认值）：主轴水平，项目从左到右排列。
row-reverse：主轴水平，项目从右到左排列。
column：主轴垂直，项目从上到下排列。
column-reverse：主轴垂直，项目从下到上排列。
.container {
flex-direction: column;
}
3. Flex对齐
在Flex容器中，你可以使用以下属性来对齐项目：
justify-content：定义项目在主轴上的对齐方式。
align-items：定义项目在交叉轴上的对齐方式。
align-content：当有多行时，定义它们在交叉轴上的对齐方式。
例如：
.container {
justify-content: center;
align-items: flex-start;
}
4. Flex项目属性
你还可以直接在Flex项目上设置以下属性来控制它们的布局：
flex-grow：定义项目的放大比例。
flex-shrink：定义项目的缩小比例。
flex-basis：定义项目在主轴上的初始大小。
flex：是flex-grow, flex-shrink 和 flex-basis 的简写属性。
order：定义项目的排列顺序。
例如：
.item {
flex: 1 1 200px; /* flex-grow: 1, flex-shrink: 1, flex-basis: 200px */
order: 2; /* 使其在其他项目之后排列 */
}
5. 注意事项
Flex布局对子元素的float, clear 和 vertical-align 属性无效。
子元素的margin属性在Flex容器内会正常工作，但auto值在主轴上可能会被忽略。
Flex布局是一个一维布局模型，用于在行或列中排列项目，但它不直接涉及二维布局（例如网格）。如果需要二维布局，你可能需要使用Grid布局或其他技术。
总的来说，Flex布局为复杂的布局提供了简洁和强大的工具，使设计师和开发者能够更有效地创建响应式和适应性强的布局。
文章来自css教程网
