FLEX弹性布局

2017-07-11 本文已影响9人哼_

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