flex布局

基本概念

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 老版本我们通常称为box;新版本我们成为flex;Webkit 内核的浏览器，必须加上-webkit前缀。 //老版本 display: -webkit-box; //新版本 display:flex; 采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。 主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

flex属性

容器上的属性

老版本容器属性

容器的布局方向： -wibkit-box-orient属性改变主轴哪一根；

horizontal 指定子元素在一个水平线上从左至右排列；vertical 从顶部向底部垂直布置子元素；（略）inline-axis 子元素沿着内联坐标轴（映射到横向）；（略）block-axis 子元素沿着块坐标轴（映射到垂直）；（略）inherit box-orient 属性的值应该从父元素继承 ；

容器的排列方向： -wibkit-box-direction改变了主轴的方向；

normal 以默认方向显示子元素。reverse 以反方向显示子元素。inherit 应该从子元素继承 box-direction 属性的值；

富裕空间的管理

box-pack start 对于普通方向的boxes，左边缘的第一个子元素被放置在左侧（所有额外的空间放置后的最后一个子元素）。对于反向boxes，右边缘最后一个子元素放置在右侧（所有额外的空间放置前的第一个子元素）；end 对于正常的方向的boxes，最后一个子元素的右边缘放置在右侧（所有额外的空间放置前的第一个子元素）。对于反向boxes，第一个孩子的左边缘放置在左侧（所有额外的空间放置后的最后一个子元素）；center 额外的空间划分均匀的两半，前一半放置第一个子元素，另一半放置最后一个子元素；justify 额外的空间平均分配给每个子元素box-align start 对于正常方向的boxes，每个子元素的顶部边缘放在沿box的顶部。反向箱，每个子元素的底边放在沿box的底部；end 对于正常方向的boxes，每个子元素的顶部边缘放在沿box的底部。反向箱，每个子元素的底边放在沿box的顶部；center 任何多余的空间被划分均匀，一半以上的子元素放在上面，剩下的子元素放在另一半；baseline 如果box-orient是内嵌单轴或横向，所有的子元素都置于他们的基线对齐；stretch 子元素拉伸以填充包含区块；

新版本容器属性

容器的布局方向：flex-direction属性改变主轴哪一根，属性决定主轴的方向（即项目的排列方向）

容器的排列方向：

所谓的排列方向其实就是主轴上flex-direction属性的四个属性值的控制； row（默认）：主轴为水平方向，起点在左方；row-reverse：主轴为水平方向，起点在右端；column：主轴为垂直方向，起点在上沿；columen-reverse：主轴为垂直方向，起点在下沿。

富裕空间的管理：

justify-content：定义了项目在主轴上的对齐方式。

flex-start（默认值）：左对齐 flex-end：右对齐center： 居中space-between：两端对齐，项目之间的间隔都相等。space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items：定义项目在交叉轴上如何对齐。

flex-start：交叉轴的起点对齐。 flex-end：交叉轴的终点对齐。center：交叉轴的中点对齐。baseline: 项目的第一行文字的基线对齐。stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

新版本新增容器属性

flex-wrap如果一条轴线排不下，如何换行。 nowrap（默认）：不换行。wrap：换行，第一行在上方。wrap-reverse：换行，第一行在下方。align-content：属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。 flex-start：与交叉轴的起点对齐。flex-end：与交叉轴的终点对齐。center：与交叉轴的中点对齐。space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。stretch（默认值）：轴线占满整个交叉轴。

容器属性的技术点

flex技术点 容器上的属性 容器的布局方向： old：box-orient;new：flex-direction容器的排列方向： old：box-direction;new：flex-direction;富裕空间的管理 old： box-packbox-alignnew：（更强大的富裕空间管理） justify-contentalign-items注意点 点一： 容器的布局方向控制了主轴是哪一根；容器的排列方向控制了主轴的方向；点二： 新版本对主轴的控制是通过flex-direction一个属性的四个属性值来实现的；老版本对主轴的控制是通过box-orient,box-direction两个属性的四个属性值来实现的；点三： 新版本中的flex-direction会对赋予空间产生影响；老版本中box-direction不会对富裕空间产生影响；

项目上的属性

注意：弹性空间的管理，会把富裕空间按比例分配到项目上；

老版本项目属性

webkit-box-flex：指定box的子元素是否灵活或固定的大小，默认值为0；

新版本项目属性

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0；align-self属性允许单个项目与其他项目不一样的对齐方式，可覆盖align-items属性；默认auto；flex-grow（拉伸因子） 用于设置或检索弹性盒的扩展比率； flex-grow计算公式： 富裕空间 = (容器大小 - 所有相邻项目flex-basis的总和)可扩展空间 = (可用空间/所有相邻项目flex-grow的总和)每项伸缩大小 = (伸缩基准值 + (可扩展空间 x flex-grow值))

flex-shrink属性定义项目的缩小比例，默认为1；

flex-shrink： 每项flex收缩大小 = 伸展基准值 - (收缩比例 / 收缩比例总和 x 溢出的空间)–>并不是正确的计算方法： 1.计算收缩因子与基准值乘的总和；2.计算收缩因数： 收缩因数=（项目的收缩因子*项目基准值）/第一步计算总和 3.移除空间的计算：移除空间= 项目收缩因数 x 负溢出的空间 //比如：一个容器wrap中的五个项目。 <div class="item">1</div> <div class="item">22</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> //样式如下 //五个项目的收缩因子和基准值50px都是默认值， #wrap .item{ width: 50px; height: 50px; background: pink; text-align: center; line-height: 50px; } //第一个项目和第二个项目更改了收缩因子和项目基准值 #wrap .item:nth-child(1){ flex-basis: 100px; flex-shrink: 2; } #wrap .item:nth-child(2){ flex-shrink: 5; } //计算方式： 1.计算收缩因子与基准值乘的总和：2*100 + 5*50 + 3*50 =600 2.计算收缩因数：收缩因数=（项目的收缩因子*项目基准值）/第一步计算总和 第一项收缩因数：2*100/600 = 0.33333 第二项搜索因数：5*50/600 = 25/60 其余项收缩因数：50/600= 5/60 3.移除空间的计算：移除空间= 项目收缩因数 x 负溢出的空间 第一项所需的移除空间：1/3 * 100 = 33.33 第二项所需的移除空间：25/60*100 = 41.67 其余项所需的移除空间：5/60 *100 = 8.333

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间，默认为auto；

flex flex-grow, flex-shrink 和 flex-basis的简写属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。快捷键：1；代表的值是1，1，0；

flex布局的几个常用属性（新老比较与汇总）