flex-弹性盒子布局

Flex 是 Flexible Box 的缩写，意为"弹性布局"

基本概念：1，采用 Flex 布局的元素，称为 Flex 容器，简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目，简称"项目"

                  2，容器默认存在两根轴：水平的主轴和垂直的交叉轴

                        

容器的属性 :属性一般都写到容器里 写在父元素里（即加了display=“flex”的元素里）

一   主轴的对齐方式

1. justify-content:flex-start；左对齐（默认）
2. justify-content:flex-end； 右对齐
3. justify-content:center ；   居中对齐
4. justify-content:space-between；两端对齐，项目之间的间隔都相等
5. justify-content:space-around；每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍
6. justify-content:space-evebly;；每两个项目之间的距离与边缘项目距离容器之间的距离相等

二   交叉轴的对齐方式

1. flex-start：交叉轴的起点对齐
2. flex-end：交叉轴的终点对齐
3. center：交叉轴的中点对齐
4. baseline: 项目的第一行文字的基线对齐
5. stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度，拉伸

flex-direction属性 

1. row（默认值）：主轴为水平方向，起点在左端
2. row-reverse：主轴为水平方向，起点在右端
3. column：主轴为垂直方向，起点在上沿
4. column-reverse：主轴为垂直方向，起点在下沿

flex-wrap属性 

默认情况下，项目都排在一条线上，防止一条线上排不下，需要用到这个属性

nowrap（默认）：不换行

wrap：换行，第一行在上方

wrap-reverse：换行，第一行在下方