FLEX弹性布局

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;值越小越靠前,可接收负值,