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