FE.CSS-理解Matrix,Flex,Grid

摘要：理解中有这么几个属性方法斜拉缩放旋转位移其实找到旧像素位置与新像素位置的关系就可以用表示。当网格项目多于网格中的单元格或网格项目放置在显式网格之外时，将创建隐式轨道。

transform中有这么几个属性方法

skew(35deg)/*斜拉*/
scale(1, 0.5)/*缩放*/
rotate(45deg)/*旋转*/
translate(30px, 15px)/*位移*/

其实找到旧像素位置(x,y)与新像素位置(x",y")的关系就可以用matrix表示。

transform的matrix()方法写法如下：
transform: matrix(a,b,c,d,e,f);
新旧像素位置转换如下：
$ egin{bmatrix} a & c &e b & d &f & 0 & 1 end{bmatrix} *egin{bmatrix} x y 1 end{bmatrix}=egin{bmatrix} ax+cy+e bx+dy+f +0+1 end{bmatrix} egin{matrix} ←x" ←y" ←1 end{matrix}$

假设transform: matrix(A, 0, 0, B, a, b); 则
$ egin{bmatrix} A & 0 &a 0 & B &b & 0 & 1 end{bmatrix} *egin{bmatrix} x y 1 end{bmatrix}=egin{bmatrix} Ax+a By+b 1 end{bmatrix} egin{matrix} ←x" ←y" . end{matrix}$
由此得出
位移translate(a, b)==matrix(1,0,0,1,a,b)
x" = x+a
y" = y+b

缩放scale(A, B)==matrix(A, 0, 0, B, 0, 0)
x" = A*x
y" = B*y

旋转rotate(θdeg)==matrix(cosθ,sinθ,-sinθ,cosθ,0,0)
x" = xcosθ-ysinθ
y" = xsinθ+ycosθ

拉伸skew(αdeg，βdeg)==matrix(1,tan(β),tan(α),1,0,0)
x"=tan(α)*y
y"=tan(β)*x

matrix3d的坐标系与数学中的不太一样，如图

新旧像素位置转换如下：
$ egin{bmatrix} a &d &g&j b & e &h&k c & f &i&l &0 & 0 & 1 end{bmatrix} *egin{bmatrix} x yz 1 end{bmatrix}=egin{bmatrix} x" y" z"1 end{bmatrix} $

3D transform 中 angle为正是逆时针旋转
rotateX( angle )
rotateY( angle )
rotateZ( angle )

缩放scale(A, B, C)==matrix3d(A, 0, 0, 0, 0, B, 0, 0, 0, 0, C, 0, 0, 0, 0, 1)
x" = A*x
y" = B*y
z" = C*z

英文扫盲
CSS3 弹性盒子(Flexible Box)
换行（wrap）
反向（reverse）
伸展（stretch）
两端对齐：多余的空白间距只在元素中间区域分配（space-between）
独立间距: 子项两侧都环绕互不干扰的等宽的空白间距(space-around)
均分间距：子项两侧空白间距完全相等(space-evenly)
收缩（shrink）
方向（direction）
分数（fraction）

flex-direction row | row-reverse | column | column-reverse;
flex-wrap nowrap | wrap | wrap-reverse;
flex-flow <‘flex-direction’> || <‘flex-wrap’>
justify-content flex-start | flex-end | center | space-between | space-around | space-evenly;
align-itemsstretch | flex-start | flex-end | center | baseline;
align-contentstretch | flex-start | flex-end | center | space-between | space-around | space-evenly;

order/ 整数值，默认值是 0 /
flex-grow ; / 数值，可以是小数，默认值是 0 /
flex-shrink; / 数值，默认值是 1 /
flex-basis | auto; / 默认值是 auto /
flexnone | auto | [ <"flex-grow"> <"flex-shrink">? || <"flex-basis"> ]
align-selfauto | flex-start | flex-end | center | baseline | stretch;

从玩中学习
https://flexboxfroggy.com/#zh-cn

竖向划分 grid-template-columns : [line1] 80px [ln2] 1.0fr [ln3] 33.3% [end];
横向划分 grid-template-rows: repeat(3, 80px [col]);
区域命名 grid-template-areas:

.container {grid-template-areas:
            "葡萄 葡萄 葡萄"
            "龙虾 养鱼 养鱼"
            "龙虾 养鱼 养鱼"
            "西瓜 西瓜 西瓜";}
.putao { grid-area: 葡萄; }

缩写 grid-template

.container {
    grid-template: 
        "葡萄 葡萄 葡萄" 1fr 
        "龙虾 养鱼 养鱼" 1fr 
        "龙虾 养鱼 养鱼" 1fr 
        "西瓜 西瓜 西瓜" 1fr
        /1fr 1fr 1fr;
}

列间距 grid-column-gap: 10px;
行间距 grid-row-gap: 10px;
缩写 grid-gap:

垂直对齐 justify-items: stretch | start | end | center;
水平对齐 align-items: stretch | start | end | center;
缩写place-items: / ;

水平分布justify-contentstretch | start | end | center | space-between | space-around | space-evenly;
垂直分布align-content: stretch | start | end | center | space-between | space-around | space-evenly;
缩写place-content： / ;

grid-auto-columns和grid-auto-rows：指定任何自动生成的网格轨道（也称为隐式网格轨道）的大小。 当网格项目多于网格中的单元格或网格项目放置在显式网格之外时，将创建隐式轨道。

grid-auto-flow row | column | row dense | column dense
缩写grid / [ auto-flow && dense? ] ?

grid-column-start grid-column-end 缩写 grid-column
grid-row-start grid-row-end 缩写 grid-row

.item-b {
    grid-column: 2 / span 纵线3;
    grid-row: 第一行开始 / span 3;
}

等同于：

.item-b {
    grid-column-start: 2;
    grid-column-end: span 纵线3;
    grid-row-start: 第一行开始;
    grid-row-end: span 3;
}

grid-area
justify-self: stretch | start | end | center;
align-self: stretch | start | end | center;
缩写 place-self / ;

从玩中学习
http://cssgridgarden.com/#zh-cn

A PostCSS plugin to keep CSS grids stupidly simple
https://github.com/sylvainpol...

仅居中元素定宽高适用：

absolute + 负margin

absolute + margin auto

absolute + calc

居中元素不定宽高适用：

absolute + transform

writing-mode

lineheight

table

css-table

flex

grid

css工作上的居中套路

参考：
理解CSS3 transform中的Matrix(矩阵)
好吧，CSS3 3D transform变换，不过如此！
display:flex布局教程
display:grid布局教程
水平布局汇总-github