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