弹性布局-flex

flex是Flexible Box 的缩写，意为“弹性布局”或者“弹性盒子”，是 CSS3 中的一种新的布局模式，可以简便、完整、响应式地实现各种页面布局，当页面需要适应不同的屏幕大小以及设备类型时非常适用。

弹性布局的核心是容器（flex container）和项目（flex item）。容器定义了一个 flex 上下文，而项目是容器内的弹性元素。弹性容器通过 flex 属性来指定弹性容器的主轴方向（水平或垂直）和弹性项目的排列方向（起始端对齐，居中对齐，结束端对齐，等分对齐等）。

使用弹性布局的主要优点包括：

• 简单易用：弹性布局是一种非常容易学习和实现的布局方式，可以使用一些简单的 CSS 属性就能实现复杂的布局效果。
• 自适应布局：弹性布局可以根据不同的屏幕尺寸和设备方向来自适应地调整布局，让页面在不同设备上都能够呈现出最佳的效果。
• 方便的对齐方式和排列方式：弹性布局提供了一系列对齐方式和排列方式，可以很方便地实现各种对齐效果，也可以让开发者根据实际需要选择合适的排列方式
• 可读性好：使用弹性布局可以让页面代码更加清晰和易读，不需要使用复杂的布局技巧和工具，可以更加专注于业务逻辑的实现。

 CSS中的flex布局具有以下属性：

container的属性

1. flex-direction ：用来决定主轴的方向
   1. row   默认值，主轴方向为水平方向从左到右
   2. row-reverse   主轴方向为水平方向从右到左
   3. column    主轴方向垂直方向从上到下
   4. column    主轴方向垂直方向从下到上
2.  flex-wrap：用来决定子元素（item）超出父容器（flex container）时是否换行
   1. nowrap  默认值 不换行
   2. wrap  换行
   3. wrap-reverse  换行，是以相反顺序，第一行在下方
3. flex-flow：是前两个属性flex-direction和flex-wrap双属性的简写： flex-flow：flex-direction flex-wrap
4. justify-content：设置弹性盒子中元素在主轴上的对其方式
   1. flex-start  默认值，左对齐
   2. flex-end 右对齐
   3. center 居中
   4. space-between 两端对齐，item之间间隔相等
   5. space-around  item两侧的间隔相等
5. align-items ： 设置弹性盒子中的元素在侧轴方向上的对其方式
   1. stretch  默认值，项目被拉伸以适合容器
   2. center  位于中央
   3. flex-start 位于顶部
   4. flex-end 位于底部
   5. baseline 与flex container的基线对齐
6. align-content：与justify-content属性类似，可以在弹性盒子的侧轴还有多余空间时，调整容器内item的对其方式
   1. stretch 默认值 将项目拉伸以占据剩余空间
   2. center 居中排列
   3. flex-start 在顶部排列
   4. flex-end 在容器底部排列
   5. space-between 多个项目均匀分布在容器中，其中第一行分布在容器的顶部，最后一行分布在容器的底部
   6. space-around 多个项目均匀分布在容器中，并且每行的间距（包括容器边缘的间距）都相等

item的属性

1. order：设置item的排列顺序。属性值为number类型，默认值为0，数值越小，排列越靠前
2. align-self： 允许为当前item设置不同于其他item的对其方式，该属性可以覆盖align-items属性的值
   1. auto 默认值，便是元素集成其父容器的align-items属性值，如果没有父容器，则为stretch
   2. strtch item被拉伸以适应容器
   3. center  位于容器的中间
   4. flex-start 位于容器的顶部
   5. flex-end 位于容器的底部
   6. baseline 与容器的基线对齐
3. flex：是flex-grow、flex-shrink、flex-basis三个属性的简写
   1. flex-grow  （必填参数），设置项目相对于其他item的增长量，默认值为0；
   2. flex-shrink（选填参数），设置项目相对于其他item的收缩量，默认值为1；
   3. flex-basis（选填参数），合法值为auto（默认值，表示自动）、inherit（表示从父元素集成该属性的值）或者以具体的值“%”、“px”、“em”等单位的形式。