前言
Flex布局是一种新型的CSS布局方式，这主要用于弹性盒子布局。Flex布局方式比传统的布局更加灵活，也更加适应不同的设备和屏幕尺寸。
什么是Flex布局？
在过去主要使用浮动和定位作为我们的布局方式，但是当我们需要在不同的设备和屏幕尺寸上设计页面的时候，我们总不可能给每个尺寸都写一份吧？这未免也太低效了，所有Flex响应式布局也就开始占据布局方式的一席之地了。
Flex布局允许我们在一个容器内对子元素进行灵活的排列、对齐和空间分配。
Flex布局概念
容器和项目
一般Flex布局都是有一个父级元素包着一个个子元素，子元素自动成为Flex项目。
.container{
display:flex;
}
<div class="container">
<div class="item"></div>
<div class="item">
<p class="sub-item"></p>
</div>
<div class="item"></div>
</div>
Flex项目只能是容器的顶层子元素(直属子元素)，不包含项目的子元素，比如上面的p元素就不是Flex项目，Flex布局只对项目生效。
主轴和交叉轴
主轴(main axis)是Flex项目的排列方向，沿其布局子容器的从main-start开始到main-end。主轴不一定是水平的，我们可以通过设置flex-direction来改变主轴。
交叉轴(cross axis)是垂直于主轴，它的方向取决于主轴的方向。主轴填满一行后将会另起一行，从cross-start到cross-end。
Flex基本属性
容器属性
- flex-direction：定义了主轴的方向，可以是水平或垂直，以及起始和结束的方向
- flex-wrap：决定了当容器空间不足时，项目是否换行
- flex-flow：这是flex-direction和flex-wrap的简写形式
- justify-content：设置项目在主轴上的对齐方式
- align-items：定义了项目在交叉轴上的对齐方式
- align-content：定义了多根轴线时，项目在交叉轴上的对齐方式
- gap、row-gap、column-gap：设置容器内项目的间距
主轴方向
换行flex-wrap
项目对齐justify-content与align-items
justify-content
align-items
多行对齐align-content
间隔gap、row-gap、column-gap
项目属性
- order：指定项目的排列顺序
- flex-grow：定义了在有可用空间时的放大比例
- flex-shrink：定义了在空间不足时的缩小比例
- flex-basis：指定了项目在分配空间前的初始大小
- align-self：允许单个项目独立于其他项目在交叉轴上对齐
Ending
以上就是CSS中Flex布局的一些属性了。
