Flex

flex-shrink

当内部元素宽度的和大于总宽度时，且不想元素换行，那么内部元素会根据比率进行压缩。

首先计算所有子元素在主轴方向上的宽度总值, 对于不够的宽度, 各子元素按flex-shrink和其原有的宽度来计算自己应该压缩的比例。
(注意此处跟grow不同的地方是flex-shrink值+原宽度值来进行压缩值计算）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<style>
.flex-box {
    display: flex;
    width: 300px;
}
.flex-box div {
    background-color: red;
    color: #fff;
    height: 100px;
    text-align: center;
    line-height: 100px;
}
.flex-box .a {
    width: 300px;
    flex-shrink: 1;
    background-color: green;
}
.flex-box .b {
    width: 100px;
    flex-shrink: 2;
}
</style>

<div class="flex-box">
    <div class="a">a</div>
    <div class="b">b</div>
</div>

a最终是240px，而b是60px。

a的权重是1（flex-shrink设为1，或不设置默认为1），
b的权重是2，
所以 加权是：a宽度Xa权重+b宽度Xb权重，
压缩比率是：(宽度X权重)/加权，
最终要压缩的宽度是：比率乘需的消化宽度
即

加权综合所得：300X1+100X2=500；
a所需压缩宽度：((300X1)/500)X100=60；
b所需压缩宽度：((100X2)/500)X100=40；
最终a宽度为：300-60=240px，b宽度为：100-40=60px；
如果，权重为0，即需要压缩的宽度为0，该元素宽度保持原样。

flex-grow flex-shrink flex-basis 常用参数

flex: 1 1 auto 即 flex: auto 会根据主轴自动伸缩以占用所有剩余空间

因为flex-basis的值是auto且没有设置width，所以大小取决于子元素内容。
剩余空间会平均分配给每个子元素。
最终效果是：比较大的子元素会变得更大，即使它与其他子元素分配了相同的空间值，但是初始值大。
如下图：

flex: 1 1 0

当flex-basis为0，意味着争夺所有空间。
如果所有子元素都设置为 1 10， 那么他们获得相等的空间分配，
结果是：所有子元素扩张后，最终宽度相同。（即使初始content 宽度不同）

flex:none

flex: 0 0 auto 任何情况都不发生伸缩

flex: initial

flex: 0 1 auto 有剩余空间时不扩充，但是空间不足会被收缩。

单值语法

flex: 1
只有一个非负数，那么是 flex-grow的值， flex-basis = 0
如flex:1 相当于 flex: 1 1 0

flex: 0%

一个带单位的有效宽度的值，会被当做flex-basis的属性值。
例如
只有一个百分比形式：那么属性是flex-basis的值
flex: 1 1 0%

双值语法

第一个值必须为一个无单位数，并且它会被当作flex-grow。
第二个值必须为以下之一：
无单位数： flex-shrink
有效宽度: flex-basis ；例如 flex: 1 30px;

Grid

二维布局

Grid 布局是将容器划分成”行”和”列”，产生单元格，然后指定”项目所在”的单元格，可以看作是二维布局。

基本概念

container、item

用网格布局的区域，称为”容器”（container）。
容器内部采用网格定位的子元素，称为”项目”（item）。
item只能是container的直接子元素，孙元素、孙孙元素不生效

row、column

cell

行和列的交叉区域，称为”单元格”（cell）

grid line

划分网格的线，称为”网格线”（grid line）。
水平网格线划分出行，垂直网格线划分出列。
n行有n + 1根水平网格线，m列有m + 1根垂直网格线

属性

容器属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

display: grid inline-grid;
grid-template-columns: 100px 100px 100px; //几列 列宽 px % both available
grid-template-rows: 100px 100px 100px;  //几行 行高
/* 数据重复 可简写 */
grid-template-columns: repeat(3, 33.33%);
/* 部分重复模式 */
grid-template-columns: repeat(2, 100px 20px 80px); //一共六列，宽度分别是100,20,80,100,20,80
/* 自动填充 */
grid-template-columns: repeat(auto-fill, 100px); //尽可能放更多的item，放不下再换行
/* fr fraction占比 */
// 如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。
 grid-template-columns: 150px 1fr 2fr; //第一列的宽度为150像素，第二列的宽度是第三列的一半。
 /* 行间隔 与 列间隔 */
 grid-gap: <grid-row-gap> <grid-column-gap>;
 /* 放置顺序: 默认row:从左向右 一行一行。 colulmn:从上到下 一列一列 */
 grid-auto-flow: row(默认) column
 /* 先行后列，尽可能填满，尽量不出现空格。比如3号item换到2号位 */
 grid-auto-flow: row dense;
 /* 单元格内部的内容如何对齐 */
 justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
/* 对齐方式的缩写 */
place-items: <align-items> <justify-items>;

整个内容区域在容器里面的水平位置

justify-content属性是整个内容区域在容器里面的水平位置（左中右），align-content属性是整个内容区域的垂直位置（上中下）。

1
2
3
4

.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
}

space-around - 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍。
space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。

• start
  

• center
  

• end
  

• stretch
  

• space-between: 项目与项目的间隔相等，项目与容器边框之间没有间隔。
  

• space-around: 每个项目两侧的间隔相等。项目之间的间隔比项目与容器边框的间隔大一倍。
  

• space-evenly: 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。
  

项目属性

justify-self属性设置单元格内容的水平位置（左中右），作用于单个项目。

align-self属性设置单元格内容的垂直位置（上中下），作用于单个项目。

.item {
justify-self: start | end | center | stretch;
align-self: start | end | center | stretch;
}