flex弹性盒子(二)
flex容器的属性(一)
1、flex-direction设置flex容器主轴方向，以下是他的几个属性
row//这是其默认的方向
row-reverse//默认方向 首尾互换
column//从下到上，主轴方向由水平变成了垂直
column-reverse//垂直，从下到上
注意：上次提到过，flex布局默认的css3样式中会存在子集未设置高度时，由默认的属性align-items: stretch高度充满flex容器的高度。当flex排列方向由水平变为垂直时，而且容器子集宽度为设置时，元素也会默认将其宽度填充满整个容器。
2、flex-wrap属性控制容器是单线还是多线，以及新线的堆叠方向(简单理解就是想要容器是单行的还是多行的)
nowwrap//默认，单行
wrap//多行
wrap-reverse//新线上前排列
3、flex-flow:flex-direction flex-wrap;//使用率较低，是以上两个属性的符合写法.
flex容器的属性(二)
4、justify-content属性表示在主轴上的对齐方式
flex-start//(默认)和默认的主轴起始端方向相同。
flex-end//主轴末端(main-end)齐平,简单理解就是往右边靠，其效果和flex-direction: row-reverse不一样.
center //居中
space-between//两端对齐，每两个flex元素之间的空隙相等
space-around // 每个项目两侧的距离相等
下面是设置了flex-direction: row-reverse;属性
5、align-items表示在交叉轴对齐的方式，属性值如下
flex-start // 交叉轴起始段(cross-start)齐平
flex-end // 交叉轴末端(cross-end)齐平
center // 居中对齐
baseline //flex元素的第一行文字为基准对齐
stretch//flex元素未设置高度时，高度充满flex容器高度
注意: baseline属性默认以元素的第一行文本对齐。
6、align-content 多线的对齐方式，单线不起作用。属性值如下：
flex-start//所有flex子元素交叉轴起始段(cross-start)齐平
flex-end//所有flex子元素交叉轴末端(cross-end)齐平
center //所有flex子元素居中对齐
stretch //未设置高度时占满整个交叉轴。默认值
space-between //交叉轴(cross)两端对齐
space-around //每跟轴两侧空隙相等
以上是flex容器的属性，下面是flex容器中元素的属性
flex元素属性
flex-basis: length;//定义该元素的main-size;概括性来讲这就是在子元素上设置主轴方向的尺寸。
flex-grow: number;//表示的是子元素被拉伸比例，默认值是0，当设置每个子元素的拉伸比例都为1时，相当于对已知大容器宽度(默认情况)进行等比分配。
flex-shrink:number;//默认值是1，即假设空间不足该项目将缩小。注意负值对该属性无效。
flex: flex-grow flex-shrink flex-basis//默认值 0 1 auto
align-self;单个项目在交叉轴的对齐方式.
flex-start //cross-start齐平
flex-end //cross-end齐平
center //居中
baseline //第一行文字
stretch //为设置高度时该元素高度为flex容器高度
以上是关于flex弹性盒子的一些知识点的概括，中间有非常多的细节之处没有能够概括出来，请各位谅解！如有补充请留言，谢谢。
