5.移动端技术选择（单独做页面）二：flex布局*******flex:1有继承性用flex:unset；取消子级继承

目录

一：flex布局：

二： 父元素常见属性

1.flex-direction:设置主轴的方向①x轴row②y轴column③从右到左row-reverse④从下到上column-reverse​

2.justify-content:设置主轴上的子元素排列方式①在主轴居中对齐center②从头部开始flex-start③平分剩余空间space-around④先两边贴边再平分剩余空间space-between⑤从尾部开始flex-end​

3.flex-wrap:设置子元素是否换行①换行wrap②不换行nowrap​

4.align-content:设置侧轴上的子元素的排列方式（多行）①在侧轴居中对齐center②从头部开始flex-start③平分剩余空间space-around④先两边贴边再平分剩余空间space-between⑤从尾部开始flex-end⑥设置子项元素高度平分父元素高度stretch​

5.align-items:设置侧轴上的子元素排列方式（单行）①从上到下flex-start②从下到上flex-end③居中center④拉伸(默认)stretch​

6.flex-flow:复合属性，相当于同时设置了flex-direction和flex-wrap写法为：flex-flow:row wrap;x轴，自动换行

​

 7.align-content（多行）和align-items（单行）的区别

 三：flex布局子项常见属性

 1.按照flex子项目所占份数划分 flex:n或者是20%;

 2.align-self控制某个子项自己在侧轴上的排列方式

 3.order属性定义项目的排列顺序（前后顺序）

---

一：flex布局：

二： 父元素常见属性

1.flex-direction:设置主轴的方向①x轴row②y轴column③从右到左row-reverse④从下到上column-reverse

2.justify-content:设置主轴上的子元素排列方式①在主轴居中对齐center②从头部开始flex-start③平分剩余空间space-around④先两边贴边再平分剩余空间space-between⑤从尾部开始flex-end

3.flex-wrap:设置子元素是否换行①换行wrap②不换行nowrap

4.align-content:设置侧轴上的子元素的排列方式（多行）①在侧轴居中对齐center②从头部开始flex-start③平分剩余空间space-around④先两边贴边再平分剩余空间space-between⑤从尾部开始flex-end⑥设置子项元素高度平分父元素高度stretch

5.align-items:设置侧轴上的子元素排列方式（单行）①从上到下flex-start②从下到上flex-end③居中center④拉伸(默认)stretch

6.flex-flow:复合属性，相当于同时设置了flex-direction和flex-wrap写法为：flex-flow:row wrap;x轴，自动换行

 7.align-content（多行）和align-items（单行）的区别

 三：flex布局子项常见属性

 

 1.按照flex子项目所占份数划分 flex:n或者是20%;

 2.align-self控制某个子项自己在侧轴上的排列方式

属性

1、auto默认值，元素继承了他父元素的align-item值，如果没有父元素则为stretch

2、stretch元素被拉伸以适应容器

3、center元素位于容器中心

4、flex-start元素位于容器的开头

5、flex-end元素位于容器的结尾

6、baseline元素位于容器的基准线上

7、initial          8、inherit

 3.order属性定义项目的排列顺序（前后顺序）