CSS布局之Flex-box弹性盒子布局详解

一、Flex弹性盒子布局介绍

Flex是什么

• Flex也叫弹性布局，是一种非常流行的web页面快速布局的解决方案
• Flex可以实现子元素在父元素中自动伸缩，即让弹性盒子内项目自动伸缩而适应容器的变化，特别适合移动端布局

学习环境

• 编辑器：VS CODE
• 浏览器：Edge、Chrome

Flex术语

• 二成员：容器和项目(container/item)
• 二根轴：主轴和交叉轴(main-axis/cross-axis)
• 二根线：起始线和结束线(flex-start/flex-end)

属性汇总

容器属性汇总

项目属性汇总

二、创建Flex容器与项目

1、创建Flex属性

2、设置容器主轴方向与多行容器

2.1 属性

2.2 主轴方向flex-direction属性值

• 项目在主轴上排列时，若宽度最终溢出，会忽略自身的宽度而自适应容器宽度的变化
  

2.3 多行容器flex-warp属性值

下面是一个示例：

	/* 设置主轴方向与多行容器 */
	/* 设置主轴方向 默认为row横向 flex-direction:row */
	flex-direction: row;
	/* 设置多行容器 默认为单行容器 flex-wrap: nowrap */
	flex-wrap: nowrap;
	flex-wrap: wrap;
	/* 简化 flex-flow: 主轴方向 换行显示 */
	flex-flow: row wrap;

3、设置主轴和交叉轴上的所有项目对齐方式

3.1 主轴对齐方式justify-content属性值

下面是一个示例：

	/* 设置主轴上所有项目对齐方式 */
	/* 默认为从起始线对齐 justify-content: flex-start */
	justify-content: flex-start;
	/* 对齐到终止线 */
	justify-content: flex-end;
	/* 对齐到主轴的中间线：水平居中对齐 */
	justify-content: center;
	/* 两端对齐，头尾项目与起始线终止线紧贴，剩余空间平均分配 */
	justify-content: space-between;
	/* 分散对齐，每个项目的左右外边距都相等，最后能平均分配每一行 */
	justify-content: space-around;
	/* 平均对齐，每个项目之间都平均分配 */
	justify-content: space-evenly;

3.2 交叉轴对齐方式

3.2.1 单行容器中，交叉轴对齐方式align-items属性值

温馨提示：

• 单行容器中，交叉轴方向上只有一个项目，所有剩余空间不需要在项目间进行分配
• 因此没有像主轴对齐的三个属性值：space-between,space-around,space-evenly

下面是一个示例：

	/* 设置交叉轴上所有项目对齐方式 align-items: flex-start */
	/* 默认为从起始线对齐 */
	align-items: flex-start;
	/* 从终止线对齐 */
	align-items: flex-end;
	/* 对齐到交叉轴的中间线：垂直居中对齐 */
	align-items: center;

3.2.2 多行容器中，交叉轴上的对齐方式align-content属性值

温馨提示：

• 多行容器中，交叉轴上可能会有多个项目，剩余空间在项目之间的分配才有意义

下面是一个示例：

	/* 设置多行容器交叉轴上所有项目对齐方式 */
	/* 默认为项目无高度时拉伸占据整个交叉轴 */
	align-content: stretch;
	/* 默认为从起始线对齐 align-content: flex-start */
	align-content: flex-start;
	/* 从终止线对齐 */
	align-content: flex-end;
	/* 对齐到交叉轴的中间线：垂直居中对齐 */
	align-content: center;
	/* 两端对齐,头尾项目与交叉轴起始线终止线紧贴,剩余空间平均分配 */
	align-content: space-between;
	/* 分散对齐,每个项目上下外边距相等 */
	align-content: space-around;
	/* 平均对齐,每个项目之间都平均分配 */
	align-content: space-evenly;

4、设置单个项目的属性

4.1 在交叉轴上的对齐方式align-self属性值

4.2 排列顺序order属性值

• 用于调整每个项目在主轴上的排列位置
• order属性的应用非常广泛，例如附件上传、素材管理中的应用

4.3 在主轴上的放缩属性

4.3.1 在主轴上的放大因子flex-grow属性值

• 在主轴上存在剩余空间是，flew-grow才有意义
• 该属性的值，称为放大因子，实际上是指单个项目占据剩余空间的权重比

下面是一个示例：

/* 设置主轴方向上，单个项目的放大因子 */
.item:first-of-type {
	/* 默认值为0 */
	flex-grow: 0;
}

.item:nth-of-type(2) {
	flex-grow: 1;
}

4.3.2 在主轴上的缩小因子flex-shrink属性值

• 在主轴上空间容纳不下所有项目时，flex-shrink才有意义
• 该属性的值，称为缩小因子，实际上是指单个项目占据超出主轴空间的权重比

4.3.3 在主轴上的计算基准尺寸flex-basis属性值

• 在分配多余空间之前，项目占据的主轴空间
• 浏览器根据这个属性，计算主轴是否有多余空间
• 该属性会覆盖项目原始大小width/height
• 该属性会被项目的min-width/min-height值覆盖

优先级：项目大小<flex-basis<min-width/height