一、Flex布局概念

Flex全称Flexible box，简称弹性布局，用盒装模型提供最大灵活性。任何容器都可以被指定为flex布局。

采用flex布局的元素被称为flex容器（flex container），它的所有子元素自动成为容器成员，称为flex项目（flex item），可以用一张图来诠释
在这里插入图片描述

在css文件里面开启布局，行内元素也可以使用（在flex前添加inline-）
在这里插入图片描述

以下为flex布局举例，先进行准备工作，确定默认属性，以方便接下来更改属性进行演示。
在这里插入图片描述

效果：

二、容器属性

flex布局容器属性，最主要的六个为有 flex-direction/ flex-wrap/ flex-flow /justify-content/ align-items/ align-content。

1.flex-direction

定义主轴上项目的排列方向，拥有四个属性。
在这里插入图片描述

row与row-reverse，水平正向（默认）与反向，左起/右起。
在这里插入图片描述

column与column-reverse，垂直正向与反向（图略），上沿/下沿。

2.flex-wrap

定义主轴上项目换行与否（在轴线排不下的情况下），拥有三个属性。
在这里插入图片描述

当页面足够大时，看不出三种属性的区别，通过挤压缩小页面，项目色块会呈现不同的变化，其中wrap/wrap-reverse会换行，而nowrap的色块会缩小。

3.flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的集合，可以同时控制前两个属性，默认值为row nowrap，且两个属性输入顺序不能颠倒。

4.justify-content

定义项目在主轴上的对齐方式。拥有五种属性。
在这里插入图片描述

在这里插入图片描述

5.align-items

定义项目在交叉轴的对齐方式。共有五个属性。
在这里插入图片描述

刚开始学习这条属性的时候没看懂，于是模拟的时候，将代码进行如下预设，方便理解。
在这里插入图片描述

尝试flex-start（交叉轴起点对齐），页面不变（与默认状态相同），而尝试flex-end时（交叉轴终点对齐）红色区域为实质上的项目高度（height：300px），按照交叉轴终点对齐后，与默认状态差距明显，相当于每个项目块上下翻转。
在这里插入图片描述
尝试center（沿交叉轴居中对齐）也方便理解了。

baseline: 项目的第一行文字的基线对齐。（还没搞明白）
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。