flex布局

总结：就是通过给父盒子添加flex属性，来控制盒子的位置和排列方式

           记得是在父盒子添加display:flex

常见父项属性

以下由6个属性是对父元素设置的

• flex-direction:设置主轴的方向
• justify-content:设置主轴上的子元素排列方式
• flex-wrap:设置子元素是否换行
• align-content:设置侧轴上的子元素的排列方式(多行)
• align-items:设置侧轴上的子元素排列方式(单行)
• flex-flow: 复合属性，相当于同时设置了flex-direction和flex-wrap

1.justify-content 设置主轴上的子元素排列方式 

justify-content属性定义了项目在主轴上的对齐方式

注意: 使用这个属性之前一定要确定好主轴是哪个

• flex-start：默认值从头部开始 如果主轴是x轴，则从左到右
• flex-end：从尾部开始排列
• center：在主轴居中对齐(如果主轴是x轴则水平居中 )
• space-around：平分剩余空间
• space-between：先两边贴边 再平分剩余空间( 重要）

注意：justify-content默认是x轴

2.  flex-wrap 设置子元素是否换行

默认情况下，项目都排在一条线(又称”轴线”)上。flex-wrap属性定义，flex布局中默认是不换行的.

• nowrap：默认值，不换行
• wrap：换行

3.  align-items 设置侧轴上的子元素排列方式(单行)

该属性是控制子项在侧轴(默认是y轴)的排列方式在子项为单项的时候使用

• flex-start：默认值 从上到下
• flex-end：从下到上
• center：挤在一起居中( 垂直居中 )
• stretch：拉伸

侧轴是相对于主轴来说，主轴如果是x，则侧轴就是y，主轴若是y，则侧轴就是x 

4. align-content设置侧轴上的子元素的排列方式(多行)

设置子项在侧轴上的排列方式并且只能用于子项出现 换行的情况(多行)，在单行下是没有效果的。

• flex-start：默认值在侧轴的头部开始排列
• flex-end：在侧轴的尾部开始排列
• center：在侧轴中间显示
• space-around：子项在侧轴平分剩余空间
• space-between：子项在侧轴先分布在两头，再平分剩余空间
• stretch：设置子项元素高度平分父元素高度

align-content 和 align-items 区别

align-items 适用于单行情况下，只有上对齐、下对齐、居中和拉伸

align-content 适应于换行(多行)的情况下(单行况下无效)，可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值。

总结就是单行找align-items 多行找 align-content

 5. flex-flow

flex-flow 属性是flex-direction和flex-wrap 属性的复合属性

• flex-flow:row wrap;

6.  flex属性

flex属性定义子项目分配剩余空间，用flex来表示占多少份数  默认为0

详细：https://blog.csdn.net/m0_50855872/article/details/117173444?spm=1001.2014.3001.5502 

学习网址： https://www.bilibili.com/video/BV1N54y1i7dG?p=7&vd_source=6ad779c66c393c50e27691999793d3e3