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