移动端flex布局-day5

移动端flex布局

display：flex；flex布局

给元素加一个display：flex；给里面的子元素提供灵活性。

里面的所有子元素可以通过给父元素加flex属性来进行排序（孙元素无效）

当我们给盒子加flex布局后，子元素的float， clear， vertical-align都将无效

父元素flex属性

默认主轴方向是X轴，水平向右。

默认侧轴方向是Y轴，垂直向下。

flex-direction:设置主轴的方向

row 从左到右（默认）

row-reverse 从右到左

column 从上到下（Y)

column-reverse 从下到上

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

flex-start 主轴上从左到右（默认）

flex-end 从尾部排列

center 居中

space-around 平分主轴剩余空间

space-between 主轴上两侧盒子先贴边，其余盒子平分剩余空间。

flew-wrap：设置子元素是否换行

nowrap 不换行（默认）

wrap 换行

align-items：设置侧轴上子元素的排列方式（单行）

flex-start 侧轴上从上到下

flex-end 从下到上

center 居中

stretch 拉伸(撑满盒子)

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

flex-start 侧轴上从上到下

flex-end 从下到上

center 居中

stretch 拉伸(撑满盒子)

space-around 平分侧轴剩余空间

space-between 侧轴上两侧盒子先贴边，其余盒子平分剩余空间。

flew-flow：主轴 换行；

就是主轴和换行的综合写法

列：flew-flow：row wrap；

子元素flex属性

flex定义子元素平分多少空间，用数字表示占多少份

列：flex：2；就是占2份的意思；

还可设百分比

align-self控制单个子元素在侧轴上的排例方式

align-self允许单个子元素与其他不一样对齐

不写值继承父元素align-items属性

如设父元素，则等于stretch

order属性定义子元素排序

数值越小，子元素排越前，给指定盒子加。

例： order：1；