资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/FE.CSS-理解Matrix,Flex,Grid

FE.CSS-理解Matrix,Flex,Grid

qujian / 2828人阅读

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

理解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);
新旧像素位置转换如下：
$ 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

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

理解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/ 整数值，默认值是 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布局

作用在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:

垂直对齐 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子项上

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

混合云 私有云 Matrix modelview matrix Grid extjs grid

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117155.html

相关文章

  • yolov5 解码使用GPU进行加速

    摘要：检查边缘情况，如果是边缘，直接赋常数值获取不大于的最大整数。 YOLOv5原理方面这里不再过多阐述，直接从输出头开始，然后设计如编解码：  1.yolov5系列的原始输出是3个head头，上图画的是输入为608*608的分辨率的图，如果输入改为640*640分...

    DobbyKim 评论0 收藏0

  • leetcode417. Pacific Atlantic Water Flow

    摘要：题目要求假设左上角的所有周围面积为太平洋，右下角的所有面积为大西洋。假定水只能从高出流向低处，要求找出所有既可以流向太平洋也可以流向大西洋的水域。但是反过来来看，任意一个可以到达大西洋的水流必然会抵达数组左边和上边的任意一点。 题目要求 Given an m x n matrix of non-negative integers representing the height of e...

    Lavender 评论0 收藏0

  • 【Hello CSS】第六章-文档流与排版

    摘要：作者陈大鱼头正常流什么是正常流其实就是我们日常所说的文档流。在官方文档里对应的是。然后，包含形成一条线的框的矩形区域称为线盒。基线线盒的高度由的计算结果决定。级层叠上下文被自动视为父级层叠上下文的一个独立单元。自由分配，由具体情况决定。 作者：陈大鱼头 github： KRISACHAN 正常流 什么是正常流？其实就是我们日常所说的文档流。在W3C官方文档里对应的是normal ...

    nihao 评论0 收藏0

  • 【Hello CSS】第六章-文档流与排版

    摘要：作者陈大鱼头正常流什么是正常流其实就是我们日常所说的文档流。在官方文档里对应的是。然后，包含形成一条线的框的矩形区域称为线盒。基线线盒的高度由的计算结果决定。级层叠上下文被自动视为父级层叠上下文的一个独立单元。自由分配，由具体情况决定。 作者：陈大鱼头 github： KRISACHAN 正常流 什么是正常流？其实就是我们日常所说的文档流。在W3C官方文档里对应的是normal ...

    null1145 评论0 收藏0

  • JavaScript五十问——对比来说CSS的Grid与FlexBox（下篇）

    摘要：语法如下是简写属性，也可以分别定义行间隔和列间隔。语法如下属性值得含义同这里不再过多说明，读者可以自行验证。 前言 在上篇——JavaScript五十问——对比来说CSS的Grid与FlexBox（上篇），我介绍了Flex的属性与使用，今天我们来总结一下Grid的具体使用方法，最后会结合Flex与Grid布局讲一讲二者的联系与不同。 需要注意得是，Grid布局与我们之前所熟悉的css布...

    Moxmi 评论0 收藏0

发表评论

登陆后可评论

0条评论

qujian

男|高级讲师
我要私信

TA的文章

阅读更多

云社区相关服务

提问 提问 学习 学习 认证 认证 产品 产品 技术服务 技术服务 售前咨询 售前咨询
最新活动
阅读需要支付1元查看
<