概述

任何一个容器都可以定义为弹性布局容器，使用display:flex(display:inline-flex)开启弹性布局。

2个方向轴：水平主轴和垂直交叉轴

6个容器属性

1.flex-direction ：主轴的方向

2.justify-content：子元素在主轴的对齐方式

3.flex-wrap:：一条轴线排不下是否换行

4.flex-flow: flex-direction和flex-wrap的组合简写

5.align-items：子元素在交叉轴的对齐方式

6.align-content：多条轴线的对齐方式

参考

flex 布局的基本概念 - CSS：层叠样式表 | MDN

Flex 布局教程：语法篇 - 阮一峰的网络日志

flex弹性布局 动画详解系列 css科普教程_哔哩哔哩_bilibili