flex布局的属性

flex属性

flex布局的核心概念是轴和容器，容器包括外层的父容器和内层的子容器，轴包括主轴（默认水平）和交叉轴（默认垂直）。

一、开启flex布局
父容器设置属性值： display: flex;
若父容器为行内元素： display: inline-flex;
Webkit内核的浏览器： display: -webkit-flex;

二、父容器可以统一设置子容器的排列方式，子容器也可以单独设置自身的排列方式，如果两者同时设置，以子容器的设置为准。
1.父容器的属性：

(1)设置主轴的方向：flex-direction
row: 默认值，主轴为水平方向从左到右；
row-reverse: 主轴为水平方向从右到左；
column: 主轴为垂直方向从上到下；
column-reverse: 主轴为垂直方向从下到上

(2)设置子容器沿主轴的排列方式： justify-content
flex-start: 默认值，起始端对齐
flex-end: 末尾端对齐
center: 居中对齐
space-around: 子容器沿主轴均匀分布，位于首尾两端的子容器到父容器的距离是子容器间距的一半
space-between: 子容器沿主轴均匀分布，位于首尾两端的子容器与父容器相切

(3)设置子容器沿交叉轴排列：align-items （单行）
flex-start: 默认值，起始端对齐
flex-end: 末尾端对齐
center: 居中对齐
baseline：基线对齐，这里的baseline默认是指首行文字，即first baseline，所有子容器向基线对齐，交叉轴起点到元素基线距离最大的子容器将会与交叉轴起始端相切以确定基线。
stretch：子容器沿交叉轴方向的尺寸拉伸至与父容器一致

(4)设置换行方式：flex-wrap
nowrap: 不换行
wrap: 换行
wrap-reverse: 反向换行

(5)轴向(flex-direction )与换行(flex-wrap)组合设置：flex-flow

(6)多行沿交叉轴对齐：align-content --设置换行才生效
flex-start: 起始端对齐
flex-end: 末尾端对齐
center: 居中对齐
space-around: 等边距均匀分布
space-between: 等间距均匀分布
stretch: 拉伸对齐

2.子容器的属性：

(1)在主轴上如何伸缩：flex
flex 属性的值可以是无单位数字（如：1, 2, 3），也可以是有单位数字（如：15px，30px，60px），还可以是 none 关键字。子容器会按照 flex 定义的尺寸比例自动伸缩，如果取值为none 则不伸缩。

(2)单独设置子容器沿交叉轴排列：align-self
flex-start: 起始端对齐
flex-end: 末尾端对齐
center: 居中对齐
baseline: 基线对齐
stretch: 拉伸对齐

(3)设置基准大小：flex-basis
flex-basis表示在不伸缩的情况下子容器的原始尺寸。主轴为横向时代表宽度，主轴为纵向时代表高度（覆盖width和height）。

(4)设置扩展比例：flex-grow --子容器弹性伸展的比例 默认值为0

(5)设置收缩比例：flex-shrink --子元素弹性收缩的比例 默认值为1

(6)设置排列顺序：order
改变子容器的排列顺序，覆盖 HTML 代码中的顺序，默认值为 0，可以为负值，数值越小排列越靠前