「这是我参与11月更文挑战的第15天，活动详情查看：2021最后一次更文挑战」

在CSS2升级到CSS3时新增了Flex布局方式，这种方式也叫弹性布局、伸缩布局。其中相关属性有作用在父级容器上的，也有作用在子级项目上的，需要灵活运用

其中父级容器上的属性分别有6个flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content，下面将一一简单讲到：

flex-direction

flex-direction 用于设置主轴方向，对应的值有row、 row-reverse、 column、 column-reverse，分别表示水平、水平翻转、垂直、垂直翻转

flex-wrap

flex-wrap用于控制子级项排列超出边界时是否换行展示；取值可以是nowrap、wrap、wrap-reverse，分别表示不换行、换行、换行并且反转行

flex-flow

flex-flow表示流动，即文档流，其实就是flex-direction和flex-wrap的复合写法

justify-content

justify-content用于设置主轴方向的对齐方式，取值有5个，分别是：flex-start、flex-end、center、space-between、space-around，表示主轴起点、主轴终点、居中、空白在元素与元素之间、空白环绕着元素

align-items

align-items与justify-content对应，justify-content表示主轴方向的对齐方式，而align-items表示侧轴上的对齐方式。但是取值有点不同，align-items的取值有：flex-start、flex-end、center、baseline、stretch(默认值)，分别表示起点对齐、终点对齐、居中对齐、基线对齐、拉伸对齐

align-content

align-content 子类多行排列时，子类在侧轴方向的对齐方式。注意如果是一行，该属性无效。即需要设置换行或者换行翻转才行，取值跟justify-content一致

主要注意：在flex布局中，容器的轴向是主还是侧是由flex容器中的属性设定，轴的两端起点和终点分别对应flex-start和flex-end，子级项目对齐和排列方式均以设定的轴向为基准。在默认情况下主轴就是水平方向，起点在左，终点在右；侧轴就是垂直方向，起点在上，终点在下

通过display: flex即可激活元素的Fle