flex容器布局

Flex基本概念
采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”
水平主轴（main axis）
垂直交叉轴（cross axis）
项目默认沿主轴排列
flex布局注意点：
flex-direction 的改变，一些依赖于主轴定义的属性也会跟着变化  （ justify-content , align-content , align-items） 
容器转为 flex 布局后，项目不受float 的影响
使用flex 布局后，注意换行问题，flex-wrap 的默认值是 nowrap ，也就是默认不换行，强行布局在一行，容易宽度不够时，将会压缩子元素。 我们需要设置 flex-wrap : wrap 。
Flex 基本语法
块级元素：在 父级元素中，设置布局样式为：display : flex ;
注意 ：是在父级元素中设置 display : flex .
flxe-direction  主轴方向（即项目的排列方向）
flex-direction : row | row-reverse | column | columu-reverse ;
flex-direction : row 默认主轴为水平方向，起点为左端；
flex-direction : row-reverse  主轴方向为水平方向，起点为右端
flex-direction : column 主轴方向为垂直方向，起点为上端
flex-direction : column-reverse 主轴方向为垂直方向，起点为下端
flex-wrap : nowrap | wrap | wrap-reverse 换行排列
flex-wrap : nowrap 默认时 nowrap 不换行
flex-wrap : wrap  换行，第一行在上方，从上端左侧开始；
flex-wrap : wrap-reverse  换行，第一行在下方；从下端左侧开始。
flex-flow 复合属性：可以把flex-direction 和 flex-wrap 的属性写在一起。
flex-flow : flex-direction || flex-wrap;
默认值：flex-flow : row nowrap ;
justify-content 定义项目（items）在主轴上的对齐方式 
tips : justify :  美 [ˈdʒʌstɪfaɪ]   调整使全行排满;使每行排齐;使齐行
justify-content : fisrt-start | fisrt-end | center | space-between | space-around | space-evenly
各属性值含义：
justify-content : fisrt-start  在主轴靠左对齐，（默认值）；
justify-content : fisrt-end  在主轴靠右对齐 ；
justify-content : center 居中对齐；
justify-content : space-between 两端对齐 ，项目之间的间距相等， 使用较多；
justify-content : space-around 每个项目的两侧间距相等，所以在一排的项目的项目之间的间隔比边框的间隔大一倍。
例

align-items 定义项目在交叉轴上的对齐方式  （交叉轴是相对轴）假设主轴是X轴，交叉轴是Y轴
align-items: flex-start | flex-end | center | baseline | stretch;
align-items : flex-start  项目以交叉轴的起点开始对齐（默认值）；
align-items : flex- end 项目以交叉轴的终点开始对齐；
align-items : center 项目以交叉轴的中点对齐；
align-items : baseline 项目中文字以第一个元素的第一行文字的基线对齐，项目中没有文字无效
align-items : stretch （默认值）如果项目没有设置高度或者高度设置为auto ，项目将占满容器的高度
align-content 定义多跟轴线的对齐方式，即多行元素。
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
属性值的含义和 align-items 的含义一致
flex 实现水平垂直居中的方法：
.center {
            display : flex ;
            justify-content : center ;
            algin-items : center ;
            }