lex属性和属性值
给父元素添加了display-flex，可以对父级元素设置以下属性，受影响的是子级元素。
实列
设置主轴对其方式
水平方向默认就是主轴方向justify-content：
设置属性值：
flex-strat（左对齐）
flex-end（右对齐）
conter（居中）
space-bewteen（两边对齐，中间自由分配）
space-around(两边距离默认比中间距离小)
space-evenly（平均分配距离）
单行垂直属性
单行垂直属性-就是单行垂值侧轴，水平有水平的属性，垂直自然也会有垂直的属性；
属性align-items：
属性值flex-strat（表示负y轴垂直左对齐）
属性值flex-end（表示正y轴垂直左下对齐）
属性值conter（表示垂直居中）
lex描述
flex属性，在css中只可以给父元素添加，给父元素添加，对子元素有效，而父元素本身不受任何影响，受影响的是它的子元素。
给父元素设置display-flex后，子元素无视任何行内标签，行内块标签，照样可以设置宽高。但是浮动对它没有任何效果了。
宽度你设置得再大，都是要由内容撑开得，假如你宽度写个10000，父盒子宽度1000，你文字长度没有1000，那么子元素写个10000px也是没有反应的，没有内容撑开，子元素的宽和高最大和父元素一样！
父元素设置display：flex，子元素不写高度，默认和父元素一样高。
flex属性和属性值
给父元素添加了display-flex，可以对父级元素设置以下属性，受影响的是子级元素。
实列
设置主轴对其方式
水平方向默认就是主轴方向justify-content：
设置属性值：
flex-strat（左对齐）
flex-end（右对齐）
conter（居中）
space-bewteen（两边对齐，中间自由分配）
space-around(两边距离默认比中间距离小)
space-evenly（平均分配距离）
多行垂直排列
多行垂直排列有多行的专属属性用法。
用align-content属性
属性值:center（多行垂直居中）
属性值:flex-strat（多行垂直左对齐，垂直左上方向垂直排列没有距离）
属性值:space-between（垂直上下两边贴边，中间自由分配）
属性值:flex-around（垂直上下两边距离默认比中间距离小）
属性值:flex-evenly（垂直距离平均分配）
主轴方向修改
我们浏览器默认的主轴方向是x轴，要是我们想修改主轴方向可以选择下面这个属性。修改主轴后，水平方向的属性和值都变成了垂直方向的属性和值
属性：flex-direction；
属性值：column(垂直向下排列)
属性值：row（默认从左到右排列，相当于没有修改主轴方向)
属性值：row-reverse(水平方向从右到左排列)
属性值：column -reverse(垂直向上排列排列)
flex-direction：column修改主轴方向后，子元素垂直上到下排列。没有修改主轴的时候，高度不给默认和父盒子一样高！当修改主轴后，宽度不给，默认和父元素一样宽！主轴修改后多行属性写法对子元素没有任何影响。原本justify-content：left-strat左对齐。修改主轴后变成向上排列，而end变成垂直向下排列，其他属性值都变成了垂直方向的属性值
aligin-seft，单个属性设置对齐方式
属性：aligin-seft
属性值:flex-strat(默认值就是左到右排列对齐，单个左边对齐)修改主轴后变成上左边垂直排列（只能设置单个子元素） 属性值:flex-end(，右到左排列对齐，单个右边对齐)修改主轴后变成下左边垂直排列（只能设置单个子元素）
属性值:center(，垂直居中对齐，单个水平居中对齐)修改主轴后变成水平居中对齐（只能设置单个子元素）
aligin-seft这个属性只能设置在子元素中，并且只会单个生效。想要多个生效就写上对应的属性名重新设置多一行。
换行—— flex-wrap:
$graph TD
Start --> Stop$
属性：flex-wrap
属性值：nowrap（默认不换行）
属性值：wrap(设置之后内容放不下自动会换行)
display-flex
给父元素设置display-flex，给子元素设置flex设置flex：1，默认占父元素的100%的大小，要是有两个子元素，给其中一个设置flex：1 另一个子元素设置了100px，那么设置了flex：1 的那个子元素就占据父元素剩余的大小
