css flex弹性布局（）_弹性布局flex循序-CSDN博客

本文链接：https://blog.csdn.net/erdongmudong/article/details/126235162

本文详细介绍了CSS的Flex弹性布局，包括如何开启弹性布局、主轴与交叉轴的概念，以及父容器和子项目的各种属性设置，如`flex-direction`、`justify-content`、`align-items`、`flex-wrap`等，帮助开发者掌握弹性布局的使用。

摘要由CSDN通过智能技术生成

开启弹性布局 display:flex;
开启弹性布局：默认按照从左至右的顺序排列。
弹性布局有两根轴，“主轴”and“交叉轴”
主轴：项目默认按照主轴的方向排列。
交叉轴：与主轴交叉的就是交叉轴。
子项目的未设大小：主轴方向的尺寸靠内容撑出，交叉轴的尺寸尽量铺满整个容器。
改变主轴方向 flex-direction: row | row-reverse | column | column-reverse;
row：默认值，主轴为x轴，项目从左至右排列。
row-reverse：主轴为x轴，项目从右至左排列。
column：主轴为Y轴，项目从上至下排列。
column-reverse：主轴为Y轴，项目从下至上排列。
主轴对齐方式 justify-content: center| flex-start | flex-end | space-evenly | space-around | space-between;
center居中。flex-start:对齐开始的位置。flex-end:对齐结束的位置。
space-evenly：分散对齐1：项目与容器边框之间|项目之间距离等分。
space-around：分散对齐2：项目之间距离等分，项目与容器边框之间的距离是项目之间的一半。
space-between：两端对齐：项目之间距离等分，项目与容器边框之间没有距离。
交叉轴对齐方式 align-items：center | fl