了解flexbox属性项最简单的方法是将flexbox属性分成两个组：
flex容器属性
flex item 属性
下面我们将分组来解释他们是如何影响布局。
flex容器属性
-
flex-direction
这个属性主要设置flex容器的主轴方向，指定flex项目在flex容器中的排列方式。flex容器的主轴方向主要有水平和纵向两种。
flex-direction:row;
从左向右排在一行
flex-direction ：column ;
按列排列
flex-direction ：row-reverse ;
反向排列
-
flex-wrap
flex项目在flex容器中默认是只显示一行。如果希望控制flex项目在flex容器中按一行或多行排列，可以使用flex-wrap
属性。
flex-wrap : nowrap ;
根据屏幕自动缩放大小
flex-wrap : wrap ;
根据每个子item动态布局
-
flex-flow
这个属性是flex-direction和flex-wrap属性的简写。
默认值：row nowrap
-
justify-content
属性用来指定flex项目在flex容器沿着主轴在当前行的对齐方式。
justify-content: flex-start;
flex项目向flex容器的左边靠齐。
justify-content: flex-end;
flex项目向flex容器的右边靠齐。
justify-content: center;
Flex项目在flex容器中居中对齐。
justify-content:space-between
Flex项目之间间距相对，第一个和最后一个flex项目向flex容器的边缘对齐.
justify-content:space-around
Flex项目前后相等的空间显示在flex容器中。第一个Flex项目左边的间距和最后一个Flex项目右边的间距是其他相相邻flex项目之间间的一半。
-
align-items
Flex项目在容器侧轴对齐方式，类似于justify-content
，只不过不是水平方向，而是纵向。这个属性可以设置所有flex项目对齐方式，并且包括匿名元素。
align-items:stretch;
Flex项目沿着flex容器侧轴方向填满整个flex容器高度（或宽度）
align-items:flex-start;
Flex项目排列在flex容器侧轴开始处。
align-items:flex-end;
Flex项目排列在flex容器侧轴结束处
align-items:center;
Flex项目排列在flex容器侧轴中间处
align-items:baseline;
Flex项目按文本基线在flex容器侧轴中排列。
-
align-content
align-content
属性将flex容器内的行在flex容器中侧轴排列方式，类似于justify-content,在主轴方向的单个Flex项目对齐方式,Flex项目在flex容器中多行显示行，其多行在flex容器的侧轴方向对齐方式。
align-content:stretch;
Flex项目行在flex容器侧轴按分布式空间排列，
align-content:flex-start;
Flex项目在flex容器侧轴开始处排列。
align-content:flex-end;
Flex项目在flex容器侧轴末尾处排列。
align-content:center;
Flex项目行沿flex容器侧轴中间排列。
align-content:space-between;
Flex项目行与行之间间距相等，并且flex项目行第一行排在flex容器侧轴开始之处，flex项目行最后一行排在flex容器侧轴末尾之处。
align-content:space-around;
Flex项目行的上下间距相等，并且沿flex容器侧轴排列。
Flex项目行上下间距相等，并且flex容器第一行距flex容器侧轴开始处间距是flex项目行与行之间间距一半。同时项目行最后一行距flex容器侧轴末尾处间距是flex项目行与行之间间距一半
Flex项目属性
-
order
属性是用来控制flex容器中flex项目的排列顺序。默认情况flex项 目在flex容器的顺序是flex项目出现的顺序。
-
flex-grow
这个属性用来指定 flex项目的放大比例，其决定了flex项目相对flex容器自由空间进行放大。
-
flex-shrink
flex-shrink属性用来指定flex项目缩小比例。决定了flex项目将相对于其他flex项目在flex容器空间不足之下自动收缩。
-
flex-basis
这个属性和width和height属性相同，用来指定flex项目的大小。
-
flex
这个属性是flex-grow、flex-shrink和flex-basis属性的简写
-
align-self
使用align-self属性可以指定flex项目自身的对齐方式或者使用align-items来指定单个flex项目
