【前端】- flex,grid布局

ltmuxin
2023-07-02 / 0 评论 / 195 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2024年02月28日,已超过111天没有更新,若内容或图片失效,请留言反馈。
code here...

深海远洋

教学内容

1. Flex 布局

1.1 必知术语

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

1.2 flex 容器属性

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

常用属性值演示:

(1) display

序号属性描述
1flex外部块级,内部子元素弹性
2inline-flex外部行内,内部子元素弹性
默认外部为块级, 即display: block-flexdisplay:flex同义
外部内联: 指元素宽度自动收缩到内容宽度,多个该元素会同行显示

(2) flex-flow

flex-flow,是 flex-direction,flex-wrap属性的简化
序号属性描述
1row nowrap主轴水平, 不换行(默认)
2row wrap主轴水平, 允许换行
3column nowrap主轴垂直, 不换行
4column wrap主轴垂直,允许换行

(3) place-content

以最常见的从左到右水平排列为例,即起始线从左侧开始
序号属性描述
1start左对齐: 空间在所有项目的右侧(默认值)
2end右对齐: 空间在所有项目的左侧
3center水平居中: 空间在所有项目二端平均分配
4space-between二端对齐: 空间在除二端元素之外平均分配
5space-around分散对齐: 空间每个项目二侧平均分配
6space-evenly平均对齐: 空间在每个项目之间平均分配

(4) place-items

以最常见的从上到下垂直排列为例,即起始线从顶部开始
序号属性描述
1stretch拉伸: 默认值, 自动拉伸成等高列
2start顶对齐: 项目从交叉轴起始线开始排列
3end底对齐: 项目从交叉轴终止线开始排列
4center居中对齐: 项目在交叉轴中居中显示

1.3 flex 项目属性

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

(1) place-self

在块方向和内联方向上对齐单个项目,flex 特指交叉轴
align-self,justify-self合并简写
序号属性描述
1stretch拉伸: 默认值, 自动拉伸成等高列
2start顶对齐: 项目从交叉轴起始线开始排列
3end底对齐: 项目从交叉轴终止线开始排列
4center居中对齐: 项目在交叉轴中居中显示

(2) flex

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

2.1 单值语法

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

2.2 双值语法

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

2.3: 三值语法

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

(3) order

规则
序号属性描述
1order 0默认值, 显示顺序与源码顺序一致
2order: 2显示在<2的右侧
3order: -2允许负数
了解更多: https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

2. Grid 布局

2.1 必知术语

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

2.2 Grid 容器属性

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

常用属性值演示:

(1) display

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

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

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

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

该属性描述了在网格容器之外的项目应该占据的行高/列宽
究竟是行高还是列宽,由grid-auto-flow属性决定
序号属性值描述
1row默认值,水平/行方向排列,空间不足换行显示
2column垂直/列方向排列,空间不足换列显示
3row dense行方向排列,尽量紧凑排列不浪费空间
4column dense列方向排列, 尽量紧凑排列不浪费空间

(5) gap: 轨道间隙

margin不一样,该间隙仅存在于轨道之间
gap: row-gap column-gap简写
序号属性值描述
1gap: 0默认值, 间隙
2gap: 10px 5px行轨间隙 10px,列轨间隙 5px
3gap: 1em行与列间隙相等,都是 1em

(6) place-content

所有项目在"容器"中的对齐方式, 即剩余空间在项目之间的分配方式
属性生效前提: 容器中存在剩余空间
place-content: 块/垂直方向 内联/水平方向
序号属性描述
1start start左对齐: 空间在所有项目的右侧(默认值)
2end end右对齐: 空间在所有项目的左侧
3center center水平居中: 空间在所有项目二端平均分配
4center二值相同,可只写一个
5start end垂直向上, 水平居右
6space-between二端对齐: 空间在除二端元素之外平均分配
7space-around分散对齐: 空间每个项目二侧平均分配
8space-evenly平均对齐: 空间在每个项目之间平均分配

(7) place-items

所有项目在"单元格"中的对齐方式, 即剩余空间在单元格之间的分配方式
属性生效前提: "单元格"中存在剩余空间,即项目设置了width/height
语法:place-items:垂直方向 水平方向
序号属性描述
1start start左对齐: 空间在所有项目的右侧(默认值)
2end end右对齐: 空间在所有项目的左侧
3center center水平居中: 空间在所有项目二端平均分配
4center二值相同,可只写一个
5start end垂直向上, 水平居右

2.3 Grid 项目属性

(1) grid-row / column

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

(2) grid-area

语法:grid-area: 行起始 / 列起始 / 行结束 / 列结束
grid-row/column相比,grid-arwa是二维的
序号属性描述
1auto默认值, 由浏览器根据项目数量自动分配
23 / 1 / 5 / 3创建一个由3 / 1 / 5 / 3四个编号构成的空间
31 / 1 / span 3 / span 2从 1 行 1 列开始,占据 3 行 2 列
4span 2 / span 2垂直占 2 格,水平占 2 格,即 4 个单元格组成的区域
5span 3跨 3 行,其它默认

(2) place-self

语法:place-self: 垂直方向 水平方向
设置某个项目,在单元格中的对齐方式
序号属性描述
1auto默认值, 由浏览器根据项目数量自动分配
2start end垂直居上,水平居右
31 / 1 / span 3 / span 2从 1 行 1 列开始,占据 3 行 2 列
4center center垂直,水平均居中
5center二值相同,可只写一个
了解更多: https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Grid_Layout
0

评论 (0)

取消