flex和graid布局

flex和graid布局

1. Flex 布局

1.1 必知术语

序号 术语 描述
1 弹性容器 拥有 display:flex/inline-flex 属性,使用 flex 弹性布局的区块
2 弹性项目 弹性容器的”子元素”
3 主轴 弹性项目排列时参考的轴线,有水平和垂直二种
4 交叉轴 与主轴垂直的布局参考线

1.2 flex 容器属性

序号 属性 描述
1 display 元素显示类型(内部和外部)
2 flex-flow 主轴方向与项目是否允许换行
3 place-content 容器剩余空间在项目之间进行分配
4 place-items 项目在交叉轴上的对齐方式

常用属性值演示:

(1) display

序号 属性 描述
1 flex 外部块级,内部子元素弹性
2 inline-flex 外部行内,内部子元素弹性

默认外部为块级, 即display: block-flexdisplay:flex同义
外部内联: 指元素宽度自动收缩到内容宽度,多个该元素会同行显示

(2) flex-flow

flex-flow,是 flex-direction,flex-wrap属性的简化

序号 属性 描述
1 row nowrap 主轴水平, 不换行(默认)
2 row wrap 主轴水平, 允许换行
3 column nowrap 主轴垂直, 不换行
4 column wrap 主轴垂直,允许换行

(3) place-content

以最常见的从左到右水平排列为例,即起始线从左侧开始

序号 属性 描述
1 start 左对齐: 空间在所有项目的右侧(默认值)
2 end 右对齐: 空间在所有项目的左侧
3 center 水平居中: 空间在所有项目二端平均分配
4 space-between 二端对齐: 空间在除二端元素之外平均分配
5 space-around 分散对齐: 空间每个项目二侧平均分配
6 space-evenly 平均对齐: 空间在每个项目之间平均分配

(4) place-items

以最常见的从上到下垂直排列为例,即起始线从顶部开始

序号 属性 描述
1 stretch 拉伸: 默认值, 自动拉伸成等高列
2 start 顶对齐: 项目从交叉轴起始线开始排列
3 end 底对齐: 项目从交叉轴终止线开始排列
4 center 居中对齐: 项目在交叉轴中居中显示

1.3 flex 项目属性

序号 属性 描述
1 place-self 交叉轴上对齐某个项目
2 flex 项目在主轴中的绽放因子与宽度
3 order 项目在主轴上的顺序

(1) place-self

在块方向和内联方向上对齐单个项目,flex 特指交叉轴
align-self,justify-self合并简写

序号 属性 描述
1 stretch 拉伸: 默认值, 自动拉伸成等高列
2 start 顶对齐: 项目从交叉轴起始线开始排列
3 end 底对齐: 项目从交叉轴终止线开始排列
4 center 居中对齐: 项目在交叉轴中居中显示

(2) flex

设置项目在主轴上的缩放因子与计算宽度
flex: flex-grow flex-shrink flex-basis

2.1 单值语法

序号 属性 描述
1 flex: 1 等价flex: 1 1 auto, 自动在主轴上收缩
2 flex: 10em flex-basis:10em,项目宽度,覆盖width

2.2 双值语法

序号 属性 描述
1 flex: 1 2 等价flex: 1 2 auto,主轴按 1:2 分配给项目
2 flex: 1 10em flex: 1 1 10em,项目宽度,覆盖width

2.3: 三值语法

序号 属性 描述
1 flex: 0 1 auto 默认值, 不放大,可缩小,宽度自动
2 flex: auto flex: 1 1 auto,全响应式
3 flex: none flex: 0 0 auto,非响应式

(3) order

规则

序号 属性 描述
1 order 0 默认值, 显示顺序与源码顺序一致
2 order: 2 显示在<2的右侧
3 order: -2 允许负数

2. Grid 布局

2.1 必知术语

序号 术语 描述
1 网格容器 拥有 display: grid/inline-grid 属性,使用 grid 布局的区块
2 网格项目 网格容器的”子元素”
3 单元格 每个项目所在的空间, 在容器布局单元,对用户不可见
4 网格区域 由一个或多个单元格构成, 可容纳一个或外个项目

2.2 Grid 容器属性

序号 属性 描述
1 display 元素显示类型(内部和外部)
2 grid-template-rows / columns 设置显式网格
3 grid-auto-rows / columns 设置隐式网格行高/列宽
4 grid-auto-flow 设置项目在容器中排列方向
5 gap 设置轨道间隙
6 place-content 容器空间在项目中的分配方式
7 place-items 单元格空间在项目中的分配方式

常用属性值演示:

(1) display

序号 属性 描述
1 grid 外部块级,内部子元素 网格布局
2 inline-flex 外部行内,内部子元素网格布局

(2) grid-template-rows / columns: 显式网格

序号 属性值 描述
1 auto 默认值,单列多行,按源码顺序垂直排列
2 50px 60px 100px 指定行/列的固定宽度
3 1fr 2fr 1fr fr比例, 行/列按比例占据全部空间
4 10% auto minmax(3em, 10em) 支持相对/绝对单位和最大小最小值
5 repeat(3, 1fr) 1fr 1fr 1fr简写
6 repeat(2, 20em 1fr) 20em 1fr 20em 1fr简写
7 repeat(2, 20em 1fr) 20em 1fr 20em 1fr简写
8 repeat(auto-fit, minmax(50px,1fr)) 最小 50px,空间足够会发尽量充满
9 repeat(auto-fill, minmax(50px,1fr)) 最小 50px,空间足够也不会放大
10 fit-content(200px) 等价于minmax(auto,max-content/200px)

难点分析:

/* auto-fit: 容器自动收容到内容宽度,没有剩余空间 */
grid-template-columns: repeat(auto-fit, 100px);
/* 容器不会自动收缩,如果内容不足会产生剩余空间 */
grid-template-columns: repeat(auto-fill, 100px);

/* 经常与minmax()配合使用,实现响应式布局 */

/* 项目最小100px,空间足够会自动伸展到全部可用空间 */
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

/* 项目最小100px,但不会自动伸展,哪怕空间足够 */
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
/* 所以, auto-fill 与 minmax配合意义不大, 不如直接使用单值 */

(3) grid-auto-rows / columns: 隐式网格

该属性描述了在网格容器之外的项目应该占据的行高/列宽
究竟是行高还是列宽,由grid-auto-flow属性决定

序号 属性值 描述
1 auto 默认值,单列多行,按源码顺序垂直排列
2 100px / 1fr 指定行/列的固定宽度
3 min-content / min-content fr比例, 行/列按比例占据全部空间
4 minmax(100px,1fr 支持相对/绝对单位和最大小最小值

(4) grid-auto-flow: 排列方向

该属性描述了在网格容器之外的项目应该占据的行高/列宽
究竟是行高还是列宽,由grid-auto-flow属性决定

序号 属性值 描述
1 row 默认值,水平/行方向排列,空间不足换行显示
2 column 垂直/列方向排列,空间不足换列显示
3 row dense 行方向排列,尽量紧凑排列不浪费空间
4 column dense 列方向排列, 尽量紧凑排列不浪费空间

(5) gap: 轨道间隙

margin不一样,该间隙仅存在于轨道之间
gap: row-gap column-gap简写

序号 属性值 描述
1 gap: 0 默认值, 间隙
2 gap: 10px 5px 行轨间隙 10px,列轨间隙 5px
3 gap: 1em 行与列间隙相等,都是 1em

(6) place-content

所有项目在”容器”中的对齐方式, 即剩余空间在项目之间的分配方式
属性生效前提: 容器中存在剩余空间
place-content: 块/垂直方向 内联/水平方向

序号 属性 描述
1 start start 左对齐: 空间在所有项目的右侧(默认值)
2 end end 右对齐: 空间在所有项目的左侧
3 center center 水平居中: 空间在所有项目二端平均分配
4 center 二值相同,可只写一个
5 start end 垂直向上, 水平居右
6 space-between 二端对齐: 空间在除二端元素之外平均分配
7 space-around 分散对齐: 空间每个项目二侧平均分配
8 space-evenly 平均对齐: 空间在每个项目之间平均分配

(7) place-items

所有项目在”单元格”中的对齐方式, 即剩余空间在单元格之间的分配方式
属性生效前提: “单元格”中存在剩余空间,即项目设置了width/height
语法:place-items:垂直方向 水平方向

序号 属性 描述
1 start start 左对齐: 空间在所有项目的右侧(默认值)
2 end end 右对齐: 空间在所有项目的左侧
3 center center 水平居中: 空间在所有项目二端平均分配
4 center 二值相同,可只写一个
5 start end 垂直向上, 水平居右

2.3 Grid 项目属性

(1) grid-row / column

语法:grid-row/column: 行或列起始线 / 行或列终止线或跨越的行或列数量

序号 属性 描述
1 auto 默认占据一个单元格,可不写
2 1 / 3 起始编号1, 终止编号3
3 2 / span 3 起始编号2, 跨越2列或列空间
4 span 2 省去第 1 个参数,从当前位置开始,占据二个单元空间
5 span 2 / span 2 垂直占 2 格,水平占 2 格,即 4 个单元格组成的区域

(2) grid-area

语法:grid-area: 行起始 / 列起始 / 行结束 / 列结束
grid-row/column相比,grid-arwa是二维的

序号 属性 描述
1 auto 默认值, 由浏览器根据项目数量自动分配
2 3 / 1 / 5 / 3 创建一个由3 / 1 / 5 / 3四个编号构成的空间
3 1 / 1 / span 3 / span 2 从 1 行 1 列开始,占据 3 行 2 列
4 span 2 / span 2 垂直占 2 格,水平占 2 格,即 4 个单元格组成的区域
5 span 3 跨 3 行,其它默认

(2) place-self

语法:place-self: 垂直方向 水平方向
设置某个项目,在单元格中的对齐方式

序号 属性 描述
1 auto 默认值, 由浏览器根据项目数量自动分配
2 start end 垂直居上,水平居右
3 1 / 1 / span 3 / span 2 从 1 行 1 列开始,占据 3 行 2 列
4 center center 垂直,水平均居中
5 center 二值相同,可只写一个
版权声明:
1:本文仅供学习和参考,不做任何收益和价值保障,请知晓。
2:本内容转载于网络,版权归原作者所有,不拥有所有权,不承担相关法律责任。
3:本站所有资源均来源于网络,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。
4:如有侵权,请联系我们1109539043#qq.com(#改为@)删除。
技术分享

最新抖音取消实名认证的方法(保留抖音号)

2023-11-23 8:53:18

技术分享

WordPress加速优化(8个缓存优化插件)

2023-11-24 17:02:53

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索