FLEX布局:弹性布局;
弹性布局是为了让容器有能力改变项目的宽度和高度,以填满可用空间,
注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
容器属性:6个
1,flex-wrap(指定项目是否换行):
wrap(换行,正序排列);
nowrap(默认就是不换行);
wrap-reverse(换行,倒序排列)
2,flex-direction:
决定主轴的方向,(项目的排列方向)
1) flex-direction:row 默认 主轴(水平方向)从左向右排列
2) flex-direction: row-reverse;主轴(水平方向)从右向左排列
3) flex-direction: column; 将主轴改为了从上到下,将交叉轴改为了从左到右,
4) flex-direction: column-reverse;主轴从下到上,
3,flex-flow:
是flex-wrap和flex-direction的混合属性: 有两个值 用了这个属性,上面两个属性都可以不用写.
flex-flow:wrap row; || wrap column || nowrap row-reverse || nowrap column-reverse
4,justify-content:
决定项目在主轴上的对齐方式(以下属性默认以从左向右为例)
1) flex-start; 延主轴左侧对齐
2) flex-end;延右侧对齐
3) center;延中间 对齐
4) space-around;均匀分布,项目两侧的留白距离相等,
5) space-between; 项目和项目之间的距离是相等的.项目靠两侧对齐.
5,align-items: (单根轴线)
决定项目延交叉轴的对齐方式(默认从上到下为例)
1) flex-start;(延上下对齐) ||
2) flex-end;(延下方对齐) ||
3) center;(延中间对齐)
4) align-items: stretch;(默认值,填满整个交叉轴空间)
5) align-items: baseline;延文字基线对齐
6,align-content:(多跟轴线)
决定多跟轴线延交叉轴的对齐方式,(只有换行产生多跟轴线是才有效)
1) align-content: stretch;填满整个交叉轴空间,默认值
2) align-content: space-between;沿交叉轴两侧对齐
3) align-content: space-around;沿交叉轴均匀分布,留白相等
4) align-content: center;沿交叉轴中点对齐
5) align-content: flex-end;沿交叉轴结束点对齐
6) align-content: flex-start;沿交叉轴起点对齐
项目属性
1,flex-grow:[number]
决定项目放大比例,填满主轴剩余空间 number是一个数值,默认为0,不放大;值越大,放大比例越大;
2,flex-shrink: 0;
决定项目缩小的比例;默认为1,自动缩小的;值越大,缩小比例越大,为0的时候是不缩小的
3,flex-basis:
决定了项目放大或者缩小的基准值
1) auto(使用项目本身大小计算); ||
2) 像素值;, 使用指定的像素值 ||
3) 100%使用指定的百分比;
no-wrap的时候,项目会占容器的剩余宽度,(其他放大无效)
wrap的时候,项目会占容器的整个儿宽度
4,flex:混合属性:
5,align-self:决定项目自身的对齐方式(相对于交叉轴来说)
1) flex-start
2) flex-end
3) center
4) stretch
5) baseline
####6,order:决定项目的顺序,默认为0;值越小越靠前,可接收负值,
