移动端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;

上一篇:[Node]Day5—Express框架简介


下一篇:【总结】纪中Day5比赛总结