盒模型布局规则(下) | 青训营笔记

这是我参与「第五届青训营」笔记创作活动的第6天. 上一节中学习了盒模型中块级和行级布局, 这一节将学习盒模型中的布局规则 : Flex 和 Grid布局.

Flex Box 排版上下文

是一种灵活的布局方式,现在比较常用. 它可以控制子级盒子的

摆放方向, 块级元素也可以摆放在同一行/列.
摆放顺序
盒子宽度和高度, 内容决定宽高.
水平和垂直方向的对齐
是否运行折行

通过设置display:flex来创建一个flex排版上下文

flex-direction属性

决定主轴的方向. row(从左到右), row-reverse(从右到左), column(从上到下), column-reverse(从下到上)

justify-content属性

设置主轴上的对齐方式

值	描述	图例
flex-start	默认值, 左对齐
flex-end	右对齐
center	居中
sapce-between	两端对齐, 子项目之间间隔一样
space-around	子项目两侧间隔一样
space-evenly	将元素占用剩下的空间平分. 两端空白和元素之间一样.

align-items属性

设置侧轴方向(垂直方向)上的对齐方

值	描述	图例
stretch	默认值, 如果没有设置固定宽度, 将占满整个容器的高度
flex-start	侧轴起点对齐
flex-end	侧轴终点对齐
center	侧轴中点对齐
baseline	以子项目第一行文字为基线对齐

align-self属性

允许单个子容器和其他子容器有不一样的对齐方式, 可以覆盖align-items属性. 属性值与align-items相同. 例如, 如果容器设置成align-items:flex-start, 我们也可以单独给容器中的元素设置为其他值, 如align-self: flex-end, 就可以得到效果如图

order属性

规定子容器的排列顺序, 数值越小越靠前, 默认为0.

Flexibility, flex属性

所有子元素都可以看成是有弹性的元素. 通过flex相关的属性可以设置伸展,收缩的能力.

flex-grow : 有剩余空间时的伸展能力. 例如将a元素的flex-grow设置为2, b元素设置为1, 则容器减去a,b,c元素的宽度后, 剩下的空间按照2:1的比例分配给a和b.
flex-shrink : 容器空间不足时的收缩能力. 值为0, 不会缩小. 值为1(默认), 等比例缩小.
flex-basis : 没有伸展或收缩时的基础长度, 默认值为auto.
上面三个属性可以缩写为flex属性<flex-grow ,flex-shrink, flex-basis>

Grid布局

通过display:grid设置, 使元素生成一个块级的Grid容器

使用grid-template相关属性将容器划分为一个二维的表格
- grid-template-columns, 设置列
- grid-template-rows, 设置行
- 可以通过固定长度, 百分比, fr来设置. fr表示fraction, 占几份.
设置每一个子项占哪些行/列
- 通过网格线指定.
- 分别设置grid-row-start,grid-column-start,grid-row-end,grid-column-end
- 或者grid-area: grid-row-start/grid-column-start/grid-row-end/grid-column-end;
- 可以通过开发者工具检查网格线.

float 浮动

通常用来实现文字环绕的效果.

例如上图所示, 将img设置为了左浮动, 此时图片就会在左侧开始绘制, p标签也是从左侧开始绘制, 位置不受影响, 但p标签中的行级元素在排版时会绕开浮动元素, 从而实现文字围绕图片的效果.

有了flex和grid实现布局后, float就只用来实现文字环绕图片的效果.

绝对定位

position属性

static 默认值, 参与常规流的布局.
relative 相对自身原本位置偏移, 不脱离文档流. 原本位置也占据空间.
- 使用top, left, bottom, right设置便宜长度
- 不影响其他元素的布局
absolute 绝对定位
- 相对于非static祖先元素(不是static就行)进行定位, 都找不到就相对于根元素进行定位.
- 脱离常规流
- 不会对流内其他元素布局造成影响, 就像absolute元素不存在一样.
fixed 相对于视口绝对定位
- 脱离常规流
- 与absolute的区别 : 总是相对于窗口进行定位.
- 可以用来设置顶部导航栏.

深入CSS(下) | 青训营笔记