Flex布局

布局的传统方案是基于盒模型,依赖display属性+float属性+position属性.但是对于那些特殊布局非常不方便,比如垂直居中就不容易实现.

于是在2009提出来了弹性盒模型就是display:box;
然后在2012年在此基础上又升级了一套新标准就是：Flex

我相信Flex布局将会成为未来布局的首选方案

(一)Flex布局基本概念

1.前提

使用Flex布局必须遵循一个前提就是父元素必须加上display:flex;设为Flex布局以后,子元素的float,clear,和vertical-align属性讲全部失效

2.容器与项目

• 父元素设置为Flex容器后,我们称为Flex容器,简称"容器"。
• 他的所有子元素自动成为容器成员，称为Flex项目。简称"项目"
• 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
• 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
  效果见下图:

项目与容器.png

3.容器的属性

容器的属性有6大类，但是可以合并为3类

• flex-direction:决定主轴的方向（项目排列的方向）
• flex-wrap:超出后是否换行
• flex-flow:就是上两个的综合,速记
• justify-content:项目在主轴的横轴对齐方式
• align-items:项目在主轴的纵轴对齐方式
• align-content:需要和flex-wrap一起使用。他表示超出后形成的2行在纵轴对齐方式

3.1flex-direction:决定主轴的方向即项目排列的反向

.box{display:flex;flex-direction:row|row-reverse|column|column-reverse;}

• row(默认值):主轴为水平方向,起点在左端.
• row-reverse:主轴为水平方向,起点在右端
• column:主轴为垂直方向,起点在上端
• column-reverse:主轴为垂直方向,起点在下端

具体效果看下图:

direction.png

3.2 flex-wrap属性.超出一行后,是否换行

.box{flex-wrap:nowrap||wrap||wrap-reverse;}

• nowrap(默认):不换行
• wrap:换行,第一行在上方
• wrap-reverse:最后一行在上方，第一行在最下方

3.3 flex-flow属性是上面的flex-direction和flex-wrap的属性的简写方式,默认值就是 row nowrap

.box{flex-flow:<flex-direction>||<flex-wrap>}

3.4 justify-content定义了项目在主轴横轴的对齐方式

.box{justify-content:flex-start||flex-end||center||space-between||space-around}

• flex-start:(默认值)左端对齐
• flex-end:右端对齐
• center:居中
• space-between:两端对齐,项目之间的间隔都相等
• space-around:每个项目的间隔都相等,项目之间的间隔比项目与边框的间隔大一倍
  具体见下图:

项目对齐方式.png

3.5 align-items:定义项目在竖轴如何对齐

.box{align-items:flex-start||flex-end||center||stretch||baseline}

• flex-start: 顶端对齐
• flex-end:尾端对齐
• center:居中对齐
• stretch:(默认)如果项目没有设置高度，那么将沾满整个容器的高度
• baseline:项目第一行的文字的基线对齐

效果图如下:

竖轴对齐.png

3.6 align-content定义了多行对齐的方式，如果项目只有一行，则该属性不会起作用

.box{align-content:flex-start||align-end||center||stretch||space-between||space-around}

效果图见下:

多行对齐.png

4.项目

• order:自定义项目的顺序
• flex-grow:默认是0关闭。后面接数字表示横轴分了多少份
• flex-shrink:默认是1.允许缩放。后面接数字。表示横轴缩小了多少份。
• flex-basis:表示项目基础值
• flex: grow值 shrink值 basis基础值。(速记版本)
• align-self:只单个项目的纵轴。不影响其他项目

4.1 order属性定义了项目的排列顺序，数值越小,排名越靠前默认是0，要是值一样则看HTMLDOM顺序

li{order:4;}

4.2 flex-grow可以理解为项目占得份数或者放大比例,如果存在剩余空间。也不放大

.box{flex-grow:<number>||默认是0}

如果所有的项目flex属性都是1，那么他们将等分剩余空间。如果一个项目的flex-grow属性为2.其他项目都是1，则前者占据的剩余空间比其他项目多一倍。

flex-grow.png

4.3flex-shrink属性表示缩小的比例。默认就是1，如果空间不足。。那么该项目将自动缩小

.box{flex-shrink:<number>||默认是1}

如果项目的flex-shrink属性都为1，当空间不足的时候，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都是1，则空间不足，前者不缩小.
具体见下图:

缩小.jpg

4.4 flex-basis属性即项目的本来大小

.box{flex-basis:100px||百分比||em||rem||auto默认就是auto}

4.5 flex属性是flex-grow,flex-shrink,flex-basis的简写,默认值就是 0 1 auto,后两个可选

.box{flex:none|[flex-grow] [flex-shrink] [flex-basis]}

该属性有2个快捷值: auto(1 1 auto)和none(0 0 auto)

4.6 align-self允许单个项目与其他项目不一样的对齐方式，可覆盖

.box{align-self: auto | flex-start | flex-end | center | baseline | stretch;}
auto:他会遵循父元素

效果图如下:

单个项目.png

总结

简单来说父元素有4个属性

• flex-flow
• justify-content
• align-items
• align-content
  子元素有3个属性:
• order
• flex
• align-self

到此Flex布局全部结束。

下面这些属于题外话了主要就是弄清楚FLEX的宽度是怎么计算的
举个例子
有3个FLEX项目对应的数值是 flex: 3 1 200px; flex: 2 2 300px;flex: 1 3 600px;
现在有2种情况
当他们的父元素是1000px的时候这个时候你会发现项目元素的总宽度大于了1000px 因为200+300+600=1100>1000超出了100PX
那么他用到的就是shrink
他先获取压缩总的数据 1200+2300+3600 = 2600
1200/2600100=7.6px; 再用基准值200-7.6=192.4就是项目1实际的宽度
2300px/2600100 = 23px ; 再用基准值300-23 = 277px 就是项目2的实际宽度
3600/2600100 = 69px; 再用基准值600-69 = 531px 就是项目3的实际宽度
第二种情况要是他们的父元素是1200px,也就是子元素的所有基准值加在一起小于父元素的宽度
200+300+600 = 1100<1200 实际宽度比总和小100PX
这个时候看的就是flex-grow了 3+2+1=6 相当于他分了6份了
项目一的宽度就是 100/63 =50 然后再用项目一的基准值+50 = 200+50 = 250

项目二的宽度就是 100/6*2 = 33再利用项目二的基准值+33 = 300+33 = 333
项目三的宽度就是100/6*1 = 16.6 再利用项目三的基准值+16.6 = 600+16.6 = 617px

用的最多的

• flex: 0 1 300px;表示的就是不用铺满，允许伸缩，宽度或者是高度最低300px
• 父元素要是flex-flow:column nowrap;那么子元素的flex:0 1 300px; 这里的300px就是最低的高度
• 父元素要是flex-flow:row nowrap;那么子元素的flex:0 1 300px; 这里的300px就是最低的宽度