基础css-flex布局基础属性

1  flex布局（弹性布局、伸缩布局）

/* 设置当前盒子为弹性盒子*/

display: flex;

/* 设置主轴方向的对齐方式：justify-content */

justify-content: center;

/* 设置侧轴方向的对齐方式：align-items */

align-items: center;

给父元素设置的相关属性

        (1)主轴方向 flex-direction

取值	效果（主轴方向）
row	水平向右（默认）
row-reverse	水平向左
column	垂直向下
column-reverse	垂直向上

        (2)主轴对齐方式 justify-content

取值	效果
flex-start	向主轴开始方向对齐
flex-end	向主轴结束方向对齐
center	居中对齐
space-around	让空白环绕盒子显示
space-between	空白只在两者之间显示
space-evenly	空白均分

        (3)单行侧轴对齐方式 align-items

取值	效果
flex-start	向侧轴开始方向对齐
flex-end	向侧轴结束方向对齐
center	居中对齐
stretch	拉伸显示（默认值）

        (4)是否换行 flex-wrap

取值	效果
wrap	换行
nowrap	不换行（默认值）

        (5)多行侧轴对齐方式 align-content

取值	效果
flex-start	向侧轴开始方向对齐
flex-end	向侧轴结束方向对齐
center	居中对齐
space-around	让空白环绕盒子显示
space-between	空白只在盒子之间显示
stretch	子元素高度拉伸显示（只有没设高才有效果）

2 给子元素设置的相关属性~

1. 分配子元素空间 flex  flex:份数;
2. 子元素排序 order设置弹性盒子中子元素的排列顺序，数值越小，排列靠前，默认是0
3. 单个子元素侧轴对齐方式 align-self

取值	效果
flex-start	向侧轴开始方向对齐（默认相当于顶部对齐）
flex-end	向侧轴结束方向对齐（默认相当于底部对齐）
center	居中对齐
stretch	子元素高度拉伸显示（只有没设高才有效果）