元素设置为伸缩容器（开启flex布局）（父容器写样式）

/* 父容器开启flex布局，只有直接子元素是伸缩项目（应该是受影响的意思） */
/* 子元素成为伸缩项目会变成块元素（不管以前是块，行内块，行内） */
div {
	/* 将该元素变成伸缩容器（开启flex布局） */
	display: flex;
	display: inline-flex;/* 不常用，不用记 */

	/* 调整主轴方向，水平从左到右，默认 */
	flex-direction: row;
	/* 调整主轴方向，水平从右到左 */
	flex-direction: row-reverse;
	/* 调整主轴方向，水平从上到下 */
	flex-direction: column;
	/* 调整主轴方向，水平从下到上 */
	flex-direction: column-reverse;
	/* 不换行（默认） */
	flex-wrap: nowrap;
	/* 换行（换行后如果上下有空余空间，元素上下会有间距） */
	flex-wrap: wrap;
	/* 反向换行（按照侧轴反转换行） */
	flex-wrap: wrap-reverse;
}

**改变了主轴方向，侧轴也随之改变**

主轴对齐方式（父容器写样式）

div {
	/* 主轴开始的位置（默认从左到右，这里是靠左） */
	justify-content: start;
	/* 主轴结束的位置（默认从左到右，这里是靠右） */
	justify-content: flex-end;
	/* 主轴中间的位置（默认从左到右，这里是中间） */
	justify-content: center;
	/* 项目均匀分布在一行中，项目之间距离是项目与边缘的2倍 */
	justify-content: first space-around;
	/* 项目均匀分布在一行中，项目之间距离相等，项目与边缘没有距离 */
	justify-content: space-between;
	/* 项目均匀分布在一行中，项目之间距离和项目与边缘距离相等 */
	justify-content: space-evenly;
}

侧轴对齐方式（只有一行情况）（父容器写样式）

div {
	/* 侧轴对齐方式，侧轴的起始位置 */
	align-items: flex-start;
	/* 侧轴对齐方式，侧轴的结束位置 */
	align-items: flex-end;
	/* 侧轴对齐方式，侧轴的中间位置 */
	align-items: center;
	/* 侧轴对齐方式，根据文字基线对齐（文字下边缘在一条水平线上） */
	align-items: baseline;
	/* 侧轴对齐方式，元素没有高度时充满整个父容器，有高度时不生效（默认） */
	align-items: stretch;
}

侧轴对齐方式（多行情况）（父容器写样式）

div {
	/* 侧轴对齐方式，侧轴起始位置 */
	align-content: flex-start;
	/* 侧轴对齐方式，侧轴结束位置 */
	align-content: flex-end;
	/* 侧轴对齐方式，侧轴中间位置 */
	align-content: center;
	/* 侧轴对齐方式，项目之间距离是项目与边缘的2倍 */
	align-content: space-around;
	/* 侧轴对齐方式，项目之间距离相等，项目与边缘没有距离 */
	align-content: space-between;
	/* 侧轴对齐方式，项目之间距离相等 */
	align-content: space-evenly;
	/* 侧轴对齐方式，元素没有高度时充满整个父容器（默认） */
	align-content: stretch;
}

元素水平垂直居中（.father：父容器，.child：子容器）

.father {
	display: flex;
	/* 方案一 */
	justify-content: center;
	align-items: center;
}
.child {
	/* 方案二 */
	margin: auto;
}

项目在主轴的基准长度

div {
	width: 200px;
	height: 200px;
	/* 设置伸缩项目在主轴上的基准长度 */
	/* 如果主轴是横向的，原来的宽失效 */
	/* 如果主轴是纵向的，原来的高失效 */
	/* 默认auto，就是原来的数值 */
	flex-basis: 300px;
}

主轴拉伸

.child {
	/* 默认是0，就算主轴有剩余空间也不拉伸 */
    /* 如果所以伸缩项目值都是1，等分剩余空间 */
	/* 如果三个伸缩项目值为1,2,3，分别分到1/6、2/6、3/6的剩余空间 */
	/* 如果有换行，按新行拉伸 */
	flex-grow: 1;
}

主轴压缩

.child {
	/* 默认值是1，等比例缩小 */
	/* 如果三个伸缩项目宽为200、300、200，值为1,2,3，则 */
	/* 计算分母：(200 * 1) + (300 * 2) + (200 * 3) = 1400 */
	/* 计算比例： */
	/* 项目一：(200 * 1) / 1400 = 比例值1 */
	/* 项目二：(300 * 2) / 1400 = 比例值2 */
	/* 项目三：(200 * 3) / 1400 = 比例值3 */
	/* 最终收缩大小： */
	/* 项目一收缩：比例值1 * 200 */
	/* 项目二收缩：比例值2 * 300 */
	/* 项目三收缩：比例值3 * 200 */
	flex-shrink: 1;
}

flex复合属性

.child {
	/* 可以拉伸 可以压缩 不设置基准长度，可简写：flex: auto; */
	flex: 1 1 auto;
}

排序和单独对齐

.child {
	/* 页面按照这个值往主轴方向排序，数值越小越靠前（默认0） */
	order: -1;
}
.child {
	/* 侧轴单独对齐（了解即可） */
	align-self: center;
}

**当父元素没有高度时子元素水平垂直居中：**

.father {
	/* 先计算父元素的高度 */
	/* 100vh：整个页面高度 */
	/* 70px：上方导航条的高度 */
	height: calc(100vh - 70px);
}
.child {
	/* 子元素使用margin: auto;实现水平垂直居中 */
	/* margin: auto;必须父元素有高度 */
	margin: auto;
}