FE.CSS-理解Matrix,Flex,Grid

时间 2019-11-09

标签 fe.css css 理解 matrix flex grid 栏目 CSS 繁體版

原文原文链接

理解transform:matrix

matrix

transform中有这么几个属性方法css

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

其实找到旧像素位置(x,y)与新像素位置(x',y')的关系就能够用matrix表示。html

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}$css3

假设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+bgit

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

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

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

matrix3d

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

新旧像素位置转换以下：
$ \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 )flex

缩放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>

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;
}

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

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

水平垂直居中

仅居中元素定宽高适用：

居中元素不定宽高适用：

css工做上的居中套路

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