弹性盒模型flexbox

弹性盒模型用到的一些属性
1、写在父元素上的属性
1)开启弹性布局（元素默认水平排列）
display:flex;

2)设置子元素的排列方式(即弹性盒的方向)
flex-direction: ;
row 默认值，子元素从左往右排列
row-reverse 子元素从右往左排列
column 子元素从上往下排列
column-reverse 子元素从下往上排列

3)设置子元素在主轴的对齐方式
默认主轴为x轴,侧轴为y轴;但当子元素垂直排列时, y轴为主轴,侧轴为x轴
justify-content: ;
flex-start 默认值，弹性盒的开始
flex-end 弹性盒的结束
center 居中
space-between 在子元素之间平均分配父元素剩余的空间
space-around 在子元素四周分配父元素剩余的空间，两端是中间的一半

4)设置子元素在侧轴的对齐方式
align-items: ;
flex-start 默认值，弹性盒的开始
flex-end 弹性盒的结束
center 居中

2、写在子元素上的属性
flex-grow: number; 子元素占父元素剩余空间的比例

注: float在弹性盒模型中不生效

原文地址：https://www.cnblogs.com/geze/p/14508386.html