「这是我参与2022首次更文挑战的第2天，活动详情查看：2022首次更文挑战」。
弹性布局的概念
让网页自动适应不同大小的屏幕
float浮动定位的问题:如果要把多个块元素水平放在一行，要计算的要素太多，我觉得他设计出来就不是为了布局的。
弹性布局的优点:自动计算，自适应
弹性布局的容器:简称容器,就是要实现布局效果的父元素。
弹性布局的项目:父元素的子元素。
弹性布局的主轴:多个项目按x轴排列,那么x就是主轴
弹性布局的交叉轴：与主轴垂直的轴
容器的属性
使用弹性布局,都要先让父元素变成弹性布局的容器。
如果希望弹性布局的父元素独占布局中的一行，就要设置父元素的display属性为flex
如果希望弹性布局的父元素显示为行内元素的特征，与其他元素在一行,可设置父元素的display属性为inline-flex
设置父元素为flex容器后，下一步就可以设置flex容器父元素的属性,包括以下:
flex-direction
flex-direction属性，可指定容器的主轴及其排列方向。
今后，只要希望设置弹性布局项目在容器内的排列方向时，就可设置容器的flex-direction属性
属性值包括：
row，默认值，即主轴是x轴，项目从最左端开始向右排列。
row-reverse，表示项目从最右侧开始，从右向左排列
注意项目的顺序在编写时虽然是12345，但是经过 reverse反转后，实际排列的顺序变为54321
column，主轴是y轴，项目从顶端开始，从上向下排列
column-reverse, 主轴是y轴，项目从底部向上排列
flex-wrap
是否允许换行,默认他是不换行，不换行可以自动的缩放子元素
属性值有
wrap:允许换行，不再帮你自动缩放
nowrap:默认属性 不允许换行
flex-flow
是前面两者的简写形式,可以同时设置flex-direction和flex-wrap两个属性
语法格式:
flex-flow:flex-direction flex-wrap
其中,两个值之间用空格分割
比如默认值为(行，不换行)flex-flow:row nowrap
justify-content
专门定义项目在主轴上的对齐方式
属性值有
flex-start 以主轴的起点对齐
flex-end 以主轴的终点对齐
center 在主轴上居中对齐
space-between,表示两端对齐(元素与元素之间的间隙相同)
space-around,元素与元素间间隙都相同
align-items
专门定义项目在交叉轴上的对齐方式
flex-start，表示让项目以交叉轴的起点方向对齐
flex-end，表示让项目以交叉轴的终点方向对齐
center，表示让项目以交叉轴的中线居中对齐
baseline，表示让项目以交叉轴的基线对齐
stretch，表示如果项目未设置尺寸，就让项目在交叉轴上占满所有 空间。
项目的属性
order属性
order属性，专门定义项目的排列顺序。
其值为整数数字，无需单位。
值越小，越靠近起点，默认值是0。
flex-grow属性
flex-grow属性，专门定义项目的放大比例。
如果容器有足够的空间，项目可以放大。
其值为整数数字，无需单位。
默认情况，项目不放大。
取值越大，占据剩余的空间越多。
flex-shrink属性
flex-shrink属性，专门定义项目的缩小比例。
如果容器空间不足时，项目可以缩小。
缩小的比例取决于flex-shrink的值。
其默认值为1，表示空间不足时，则等比缩小。
可改为0，表示不缩小。
align-self属性
align-self属性，专门单独定义某一个项目在交叉轴上的对齐方式。
与align-items属性对比 align-items定义在父容器上约束所有项目的统一对齐方式
align-self定义在项目上，只约束当前所在的一个项目。
其取值和align-items完全一样。只是多了一个auto值，表示继承 父元素的align-items效果。
