flex弹性布局

Flex弹性布局

核心概念

主轴

简单理解为：元素的默认添加方向所在的轴，即为主轴

侧轴

与主轴交叉的那个轴被称为侧轴

实现过程

#  1、设置主轴
display: flex;
flex-direction: row; /* 设置X轴为主轴，子元素从左向右排列，默认 */
flex-direction: row-reverse; /* 设置X轴为主轴，子元素从右向左排列 */
flex-direction: column; /* 设置Y轴为主轴，子元素从上向下排列 */
flex-direction: column-reverse; /* 设置Y轴为主轴，子元素从下向上排列 */

2、换行

flex-wrap: wrap; /* 设置换行 */
flex-wrap: nowrap; /* 设置不换行，默认 */
#  3、主轴子元素排列
justify-content: flex-start; /* 从开始位置对齐 */
justify-content: center; /* 居中对齐 */
justify-content: flex-end; /* 从结束位置对齐 */
justify-content: space-evenly; /* 平分，完全平分 */
justify-content: space-around; /* 平分，元素外边距值相等 */
justify-content: space-between; /* 平分，两边贴边，剩下空间平分 */

4、侧轴子元素排列

设置子元素排列分为单行和多行两个属性：
/* 单行 */
align-items: flex-start;
/* 多行 */
align-content: flex-start;

**语法**
/* 单行 */
align-items: flex-start; /* 从开始位置对齐 */
align-items: center; /* 居中对齐 */
align-items: flex-end; /* 从结束位置对齐 */

/* 多行 */
align-content: flex-start; /* 从开始位置对齐 */
align-content: flex-end; /* 从结束位置对齐 */
align-content: center; /* 居中对齐 */
align-content: space-around; /* 平分，元素的外边距值相等 */
align-content: space-between; /* 平分，两边贴边，平分剩余空间 */

5、元素的占比

.item{
	flex: 1; /* 值为数字类型，值越大占比越大，可以为小数 */
}

6、排序

.item{
	order: 0; /* 值为数字类型，默认为0，值越大越靠后，可以使用负数 */
}

7、自身侧轴排列方式

align-self: flex-start; /* 开始 */
align-self: center; /* 居中 */
align-self: flex-end; /* 结束 */
align-items: stretch; /* 拉伸 */