是什么：

1. Flexible Box 简称 flex，意为”弹性布局”，可以简便、完整、响应式地实现各种页面布局
2. 采用flex布局的元素，称为flex容器container，它的所有子元素自动成为容器成员，称为flex项目item
3. 容器中默认存在两条轴，主轴和交叉轴，呈90度关系。item沿主轴进行排列，通过flex-direction修改主轴的方向

属性有哪些：

一、容器属性：

1. flex-direction --- 决定主轴的方向（即项目排列方向）：
   row（默认值）：主轴为水平方向，起点在左端
   row-reverse：主轴为水平方向，起点在右端
   column：主轴为垂直方向，起点在上沿
   column-reverse：主轴为垂直方向，起点在下沿。
   
   
2. flex-wrap --- 决定容器内项目是否可换行：
   nowrap（默认值）：不换行
   wrap：换行，第一行在下方
   wrap-reverse：换行，第一行在上方
   
   
3. flex-flow --- 是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
   
   
4. justify-content --- 决定了项目在主轴上的对齐方式：
   flex-start（默认值）：左对齐
   flex-end：右对齐
   center：居中
   space-between：两端对齐，项目之间间隔相等
   space-around：两个项目两侧间隔相等
   
   
5. align-items --- 决定了项目在交叉轴上的对齐方式：
   flex-start：交叉轴的起点对齐
   flex-end：交叉轴的终点对齐
   center：交叉轴的中点对齐
   baseline：项目的第一行文字的基线对齐
   stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度
   
   
6. align-content --- 用于控制多行弹性项目在交叉轴上的对齐方式，当有多行时才会生效:
   可选值与 align-items 相似
   
   
7. ......(剩下一些不常用的就不在这列举出来了)

二、项目属性：

1. flex-grow： ---- 定义项目的放大比例（容器宽度>元素总宽度时如何伸展）默认为0，即如果存在剩余空间，也不放大。
   
2. flex-shrink：---- 定义了项目的缩小比例（容器宽度<元素总宽度时如何收缩）默认为1，即如果空间不足，该项目将缩小。
   
3. flex-basis：---- 设置的是元素在主轴上的初始尺寸，所谓的初始尺寸就是元素在flex-grow和flex-shrink生效前的尺寸。
   
4. flex：---- flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto，也是比较难懂的一个复合属性。