Flex弹性布局

flex布局原理

通过给父盒子添加flex属性，控制子盒子的位置和排列方式

1.flex父项常见属性

1.1.flex-direction：设置主轴的方向

主轴和侧轴

flex布局中，主轴和侧轴两个方向，默认主轴是x轴，指向水平向右，侧轴y轴，垂直向下

元素跟着主轴排列

属性值	说明
row	默认从左向右
row-reverse	右到左
column	上到下
column-reverse	下到上

主轴靠flex-direction

1.2.justify-content：设置主轴子元素排列方式

定义项目在主轴上的对齐方式

ps：使用属性前确定好主轴是哪个

属性	说明
flex-start	默认值 从头部开始，主轴如果x轴，从左到右
flex-end	尾部开始排列
center	在主轴居中对齐
space-around	平分剩余空间
space-between	先两边贴边 再评分剩余空间

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

默认情况下，项目都排在一条线上，flex布局默认不换行，多了就缩小子元素宽度，放到父元素中

子元素换行

属性	说明
nowrap	默认不换行
wrap	换行

1.4.align-content：设置侧轴上子元素排列方式（多行）

设置子项在侧轴排列，并只能用于子项出现换行的情况（多行），单行没有效果

属性	说明
flex-start	默认值 从头部开始，主轴如果x轴，从左到右
flex-end	尾部开始排列
center	在侧轴居中对齐
space-around	子项在侧轴平分剩余空间
space-between	子项先两边贴边 再平分剩余空间
stretch	设置子项元素高度评分父元素高度

1. 5align-items设置子元素排列方式(单行)

控制子项在侧轴（默认y轴）上的排列方式在子项为单项（单行）的时候使用

属性	说明
flex-strat	默认值，从上到下
flex-end	从下到上
center	挤在一起居中（垂直居中）
stretch	拉伸

1.6.flex-flow

flex-direction和flex-wrap属性的复合属性（简写）

例如

flex-flow：row wrap

2.flex布局子项常见属性

2.1.flex

flex属性定义子项目分配剩余空间，flex表示占多少份数

在子项flex:1,在这个大父项盒子中，占剩下的1份，如果只有这一个配置了flex，那么剩下全是这个子项的

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

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性，默认值auto，表示继承父元素align-items属性，如果没有父元素，等同于stretch

2.3.order属性定义项目的排列顺序

数值越小，排列越靠前，默认为0，可以有负数