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  主轴方向为水平方向，起点为