CSS3之优雅弹性布局

盒模型

在 CSS 中盒模型被分为两种，第一种是w3c的标准盒模型，另一种是IE6混杂模式的传统模型。他们都是对元素计算尺寸的模型。但他们的不同是计算的方式不同。

1.W3C标准盒模型 element空间高度（盒子） = width + padding + border; width 为内容高度。即width不包括padding 和 border

2.IE6混杂模式盒模型 内容高度（盒子）= width - padding - border 即 设置width的数值就是element 的空间高度，width包含padding 和 border

重点来了。css3中有一个可以选择盒模型的属性。

box-sizing : border-box / content-box（content-box为W3C标准盒子 border-box为IE6混杂模式的盒子）

弹性盒子

display:flex （flex为复合属性，且必须配合父元素display:flex使用。给父级设置上这个属性，子代元素才能成为弹性元素）

弹性盒子的两大核心：容器（父容器、子容器），轴（主轴、交叉轴）

 

父容器上的六个属性:

1. flex-direction 决定主轴的方向
2. flex-wrap 是否换行
3. flex-flow  flex-direction和flex-wrap的简写
4. justify-content  子容器在主轴上的对齐方式
5. align-items  在侧轴上如何对齐
6. align-content  多根轴线的对齐方式

1.flex-direction：属性决定主轴的方向,即项目的排列方向

1. row（默认值）：主轴为水平方向，起点在左端。
2. row-reverse：主轴为水平方向，起点在右端。
3. column：主轴为垂直方向，起点在上沿。
4. column-reverse：主轴为垂直方向，起点在下沿。

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

2.flex-wrap：默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

1. nowrap（默认）：不换行。
2. wrap：换行，第一行在上方。
3. wrap-reverse：换行，第一行在下方。

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

3.flex-flow：flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

eg：.box {   flex-flow: row nowrap ....; }

4.justify-content：属性定义了项目在主轴上的对齐方式。(最常用属性之一）

它可取5个值，具体对齐方式与轴的方向有关。主轴为默认值。

位置排列：

1. flex-start（默认值）：左对齐
2. flex-end：右对齐
3. center： 居中

分布排列：

1. space-between：两端对齐，项目之间的间隔都相等。
2. space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

eg：.box {   justify-content: flex-start | flex-end | center | space-between | space-around; }  （实现居中对齐）

5.align-items：属性定义项目在侧轴上如何对齐。

它可取5个值。具体的对齐方式与交叉轴的方向有关，主轴为默认值。

位置排列：

1. flex-start：交叉轴的起点对齐。
2. flex-end：交叉轴的终点对齐。
3. center：交叉轴的中点对齐。

基线排列：

1. baseline: 子容器的第一行文字的基线对齐。（不常用，但是特殊情况有奇效）

拉伸排列：

1. stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

eg：.box {   align-items: flex-start | flex-end | center | baseline | stretch; }                             （实现垂直水平居中）

6.align-content：属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

该属性可取6个值。

1. flex-start：与交叉轴的起点对齐。
2. flex-end：与交叉轴的终点对齐。
3. center：与交叉轴的中点对齐。
4. space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
5. space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
6. stretch（默认值）：轴线占满整个交叉轴。

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

子容器上的六个属性:

子容器是有弹性的（flex 即弹性），它们会自动填充剩余空间，子容器的伸缩比例由 flex 属性确定。

1. flex-grow：放大比例
2. flex-shrink：缩小比例
3. flex-basis：伸缩基准值
4. flex：是flex-grow, flex-shrink 和 flex-basis的简写
5. order：排列顺序
6. align-self ：单个项目对齐方式

1.flex-grow 根据所设置的比例分配盒子所剩余的空间 拓展：左右两栏布局 默认值0（空间不分配）

给弹性元素设置不同的num和相同的num。grow的总量为 1（所有num加起来做分母。然后在把各自的num做分子。这就是分配比例）

.demo{   flex-grow: number; }

三栏布局（左右固定宽度。中间设置flex-grow: 1）

.itme {
  box-sizing: border-box;
  /* width: 100px; */
  height: 30px;
  background-color: red;
  border: 1px solid #000;
  text-align: center;
}
.itme:nth-last-of-type(1) {
  width: 100px;
}
.itme:nth-last-of-type(2) {
  flex-grow: 1;
  min-width: 400px;
}
.itme:nth-last-of-type(3) {
  width: 100px;
}

小结：这里指的是在弹性元素本身没有占满父级盒子。就会按一定比例去分割剩余区域（小点：是本身的宽度加上分割的宽度。如果想让每个盒子的宽一样。可以先设置flex-basis的值。然后在分割盒子多余区域。这样就可以不会以开始占据宽度在来分割剩下的区域了（就是常规的的组合样式flex：1 就达到目的））

2.flex-shrink

设置弹性元素的收缩比。弹性元素例溢出盒子（父容器）的部分，按照比例的大小砍掉相应的大小，即比例越大，被砍的越大，默认值1；

.demo{  flex-shrink: number; }

eg: 盒子400px; 三个子元素200px; 多出200px; 每个子元素缩减的宽度 = 200/3 （因为shrink默认为1）

照该原理来计算的话，当某个Flex项目的收缩因子设置较大时，就有可能会出现小于0的现象。如果把第四个flex元素的flex-shrink设置为15。这样一来，四个Flex项目的收缩因子就变成：1:2:3:15。也就是说把Flex容器不足空间分成了21份，每份占据的宽度是20px（420 / 21 = 20px）。那么Flex项目的宽度就会出现0的现象（300 - 15 * 20 = 0）。这个时候会不会出现无空间容纳Flex项目的内容呢？

在Flexbox布局当中，会阻止Flex项目元素宽度缩小至0。此时Flex项目会以 min-content 的大小进行计算，这个大小是它们利用任何可以利用的自动断行机会后所变成的（原文: https://www.w3cplus.com/css/flex-item-calculate.html © w3cplus.com）

 

3.flex-basis 伸缩基准值

项目占据主轴的空间该属性设置元素的宽度或高度，当然width也可以用来设置元素宽度，如果元素上同时出现了width 和flex-basis那么flex-basis会覆盖width的值（主轴设置为Y的时候同理）

4.flex 常用简化写法: （grow  shrink  basis）

flex:1 —>  flex:1 1 0%;

flex:3 —> flex:3 1 0%;

注意:flexbox布局和原来的布局是两个概念，部分css属性在flexbox盒子里面不起作用，eg：float， clear， column,vertical-align 等等

5.order 

定义项目的排列顺序。数值越小，排列越靠前，默认为0 .demo{   order: number; }

6.align-self

align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

.demo{   align-self: auto | flex-start | flex-end | center | baseline（基准线） | stretch}

 

掘金文章：

https://juejin.im/post/58e3a5a0a0bb9f0069fc16bb

大漠老师文章：深入了解弹性盒模型机制

https://www.w3cplus.com/css/flex-item-calculate.html

 

有关于flex-basis属性相关的运用简单的小结：

flex-basis 默认值为 auto 如果 flex元素 显式的设置了width值，同时flex-basis为auto时，则flex项目的宽度为按width来计算，如果未显式设置width，则按 flex元素 的内容宽度来计算。 如果 flex元素 显式的设置了width值，同时显式设置了flex-basis的具体值，则flex元素 会忽略width值，会按flex-basis来计算 flex元素

->flex-basis为auto ：显式设置width 按width计算宽度 如果没有 则是按内容宽度

->flex-basis为具体值 ：会忽略width值，按flex-basis计算

当flex容器剩余空间不足时，

flex元素 的实际宽度并不会按flex-basis来计算，会根据 flex-grow 和 flex-shrink 设置的值给 flex元素 分配相应的空间 对于Flexbox布局中，不建议显式的设置 flex元素 的 width 值，而是通过flex-basis来控制 flex元素 的宽度，这样更具弹性

如果 flex元素 显式的设置了min-width 或 max-width 值时，当 flex-basis 计算出来的值小于min-width则按min-width值设置Flex项目宽度，反之，计算出来的值大于max-width值时，则按max-width的值设置 flex元素 宽度

著作权归作者所有。原文: https://www.w3cplus.com/css/flex-item-calculate.html © w3cplus.com