FE.CSS-理解Matrix,Flex,Grid

理解transform:matrix

matrix

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);
新舊像素位置轉換以下：
$ \begin{bmatrix} a & c &e \\ b & d &f\\0 & 0 & 1 \end{bmatrix} *\begin{bmatrix} x \\ y \\1 \end{bmatrix}=\begin{bmatrix} ax+cy+e \\ bx+dy+f \\0+0+1 \end{bmatrix} \begin{matrix} ←x' \\ ←y' \\←1 \end{matrix}$

假設transform: matrix(A, 0, 0, B, a, b); 則
$ \begin{bmatrix} A & 0 &a \\ 0 & B &b\\0 & 0 & 1 \end{bmatrix} *\begin{bmatrix} x \\ y \\1 \end{bmatrix}=\begin{bmatrix} Ax+a \\By+b \\1 \end{bmatrix} \begin{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

matrix3d的座標系與數學中的不太同樣，如圖

新舊像素位置轉換以下：
$ \begin{bmatrix} a &d &g&j \\ b & e &h&k \\ c & f &i&l\\0 &0 & 0 & 1 \end{bmatrix} *\begin{bmatrix} x \\ y\\z \\1 \end{bmatrix}=\begin{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

理解Flex佈局

英文掃盲
CSS3 彈性盒子(Flexible Box)
換行（wrap）
反向（reverse）
伸展（stretch）
兩端對齊：多餘的空白間距只在元素中間區域分配（space-between）
獨立間距: 子項兩側都環繞互不干擾的等寬的空白間距(space-around)
均分間距：子項兩側空白間距徹底相等(space-evenly)
收縮（shrink）
方向（direction）
分數（fraction）

做用在flex容器上

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;

做用在flex子項上

order<integer>/ 整數值，默認值是 0 /
flex-grow <number>; / 數值，能夠是小數，默認值是 0 /
flex-shrink<number>; / 數值，默認值是 1 /
flex-basis<length> | 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佈局

做用在grid容器上

豎向劃分 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: <grid-row-gap> <grid-column-gap>

垂直對齊 justify-items: stretch | start | end | center;
水平對齊 align-items: stretch | start | end | center;
縮寫place-items: <align-items> / <justify-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：<align-content> / <justify-content>;

grid-auto-columns和grid-auto-rows：指定任何自動生成的網格軌道（也稱爲隱式網格軌道）的大小。 當網格項目多於網格中的單元格或網格項目放置在顯式網格以外時，將建立隱式軌道。

grid-auto-flow row | column | row dense | column dense
縮寫grid <grid-template-rows> / [ auto-flow && dense? ] <grid-auto-columns>?

做用在grid子項上

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 <align-self> / <justify-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