flex部局 API

标签：flex   对齐   元素   相关   自适应   注意   start   ali   round   

1、 要使用伸缩部局先要给
父元素设置为伸缩盒子
display:flex;

2、 伸缩盒子具有了主轴（默认水平从左向右）
伸缩盒子还有测轴（侧轴始终垂直于主轴）
伸缩盒子中所有的子元素都按照主轴的方向显示

3、 设置主轴方向 (默认值row)
flex-direction:row; 从左向右
flex-direction:row-reverse; 从右向左
flex-direction:column; 从上向下
flex-direction:column-reverse; 从下向上

4、 设置 子元素 在主轴方向的对齐方式
justify-content:flex-start; 在主轴的开始位置对齐
justify-content:flex-end; 在主轴的末尾对齐
justify-content:center; 在主轴的中间位置对齐
justify-content:space-around; 环绕显示
justify-content:space-between; 占满正行（左右两边对齐中间在中间显示）

5、 设置元素在侧轴方向的对齐方式（默认拉伸）如果有高度就看不到拉伸；
align-items:flex-start;
align-items:flex-end;
align-items:center;
align-items:stretch; 拉伸

6、 设置伸缩盒子是否允许子元素换行（默认不会换行显示）
flex-wrap:nowrap;不换行
flex-wrap:wrap; 换行

7、 设置换行后的对齐方式(默认值stretch)
注意：给属性必须配合flex-wrap:wrap;使用
align-content:flex-start; 开始位置换行没有空格
align-content:flex-end; 结束位置对齐
align-content:center; 中间对齐
align-content:space-between; 一行在开始位置一行在结束位置
align-content:space-around; 环绕对齐
align-content:stretch; 拉伸

8、 伸缩盒子中子元素的相关属性
子元素属性 order
order值越大谁就越靠后

flex;子元素属性：设置子元素的缩放比；
自适应盒子设置为flex：1；
把父元素整体减去固定盒子的宽度后剩下的部
分整体为一份；

flex部局 API

标签：flex   对齐   元素   相关   自适应   注意   start   ali   round   

原文地址：https://www.cnblogs.com/qiweile/p/9631724.html