16.弹性布局

1.什么是弹性布局

       HTML的弹性布局（Flexbox）是一种一维布局模型，用于在容器中对齐子元素，即使容器大小动态变化或未知，也能保持合适的布局。弹性布局是CSS3引入的一种新特性，已经在所有主流浏览器中得到了支持。

2.弹性布局的基本概念包括：

容器（Flex container）：需要应用弹性布局的父元素。
项目（Flex item）：弹性布局容器中的每一个子元素。
弹性布局有两个主要轴：

主轴（Main axis）：元素排列的方向，可以是水平或垂直。
交叉轴（Cross axis）：与主轴垂直的方向。
在HTML中使用弹性布局，需要给父容器添加display: flex;或display: inline-flex;属性。这将使容器成为一个弹性布局容器，其直接子元素将成为弹性项目。

3.作用于父容器的属性有：

flex-direction：决定主轴的方向，可以是row（默认值，主轴为水平方向，起点在左端）、row-reverse（主轴为水平方向，起点在右端）、column（主轴为垂直方向，起点在上沿）或column-reverse（主轴为垂直方向，起点在下沿）。
flex-wrap：决定子元素是否换行。
flex-flow：是flex-direction和flex-wrap的简写形式。
justify-content：定义子元素在主轴上的对齐方式。
align-i