弹性盒子（flex布局）

1. 容器: 具有 display:flex; 样式的元素就是容器, 任何元素都可以是容器
2. 项目: 容器下面的所有子元素, 都是项目
3. 主轴: 在容器里面,  默认情况下 从左往右的一根轴线, 就是主轴
4. 交叉轴: 默认情况下, 从上往下垂直于主轴的, 是交叉轴

 

 容器(父元素)的六个属性：

1. flex-direction修改主轴方向

flex-direction：属性值（row、row-reverse、column、column-reverse）

2. flex-wrap属性 定义，如果一条轴线排不下，如何换行

flex-wrap：属性值（nowrap、wrap、wrap-reverse）

3.flex-flow属性是==flex-direction属性==和==flex-wrap属性==的简写形式，默认值为row nowrap。

flex-flow：属性值（ row nowrap、 column wrap、 column-reverse wrap-reverse）

4.justify-content属性 主轴如何排列

justify-content：属性值（ flex-start、 center、flex-end、space-between、space-around、space-evenly）

5. align-items 交叉轴如何排列

align-items：属性值（ stretch、baseline、 flex-start、 center、flex-end）

6.align-content：

align-content：属性值（stretch、flex-start、 center、flex-end、space-between、 space-around、space-evenly）

项目的六个属性（设置在项目上）：

1. order 项目的排列顺序

• 值是一个整数
•  默认值为0
• 值越大排列越靠后, 值越小排列越靠前

2. flex-grow 定义项目是否放大

• 默认值为0, 即: 即使主轴有多余的空间, 项目也不放大

3. flex-shrink 定义项目是否缩小；

4. flex-basis 项目原本占据的主轴的空间大小

• flex-basis  项目未缩放之前, 原本占据的主轴空间大小，可以是像素值, 可以是百分比

5. flex属性: (放大) (缩小) (项目原本占据的主轴的空间大小)；

6. align-self ：重写当前的项目在交叉轴的排列方式

    align-self: center;