移动端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：设置子元素是否换行
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；
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
