Lazy loaded image
学习笔记
🗒️前端-阶段01-HTML5&CSS3-Day15
字数 1368阅读时长≈ 4 分钟
2022-6-25
2025-1-10
type
status
date
slug
summary
tags
category
icon
password

1 多列布局

① 设置给包裹元素的 CSS 属性（共 8 个属性）

CSS 属性名
含义
值
column-count
列数
数字
column-width
列宽
长度
columns
同时设置列数和列宽
空格分隔两个值
column-gap
列间距
长度
column-rule-style
列分隔线风格
同 border-style
column-rule-color
列分隔线颜色
颜色
column-rule-width
列分隔线宽度
长度
column-rule
列分隔线复合属性
空格分隔两个值
column-count 和 column-width：

② 设置给子元素的 CSS 属性（共 4 个属性）

CSS 属性名
含义
值
column-span
跨列
none：不跨列，默认值。 all：跨所有列
-webkit-column-break-before（了解）
设置元素前面是否断列
auto：自动，默认值。 always：必须断列。 avoid：必须不断列。
-webkit-column-break-after（了解）
设置元素后面是否断列
auto：自动，默认值。 always：必须断列。 avoid：必须不断列。
-webkit-column-break-inside（了解）
设置元素内部是否断列
auto：自动，默认值。 avoid：必须不断列。

2 伸缩盒布局 Flex

2.1 伸缩容器和伸缩项目

① 概念定义

伸缩容器： 元素设置 display:flex或者display:inline-flex，该元素就称为伸缩容器。
伸缩项目： 伸缩容器的子元素称为伸缩项目。

② 伸缩项目的特点

2.2 设置主轴方向和换行方式

主轴： 伸缩项目沿着主轴排列，主轴的默认方向是从左到右。
侧轴： 与主轴垂直的是侧轴。

① 设置主轴方向

给伸缩容器设置CSS属性 flex-direction 可以修改主轴方向，该属性的值如下：

② 设置换行方式

给伸缩容器设置CSS属性flex-wrap 可以修改换行方式，该属性值如下：

③ 同时设置主轴方向和换行方式

flex-flow 可以同时设置主轴方向和换行方式，是 flex-direction 和 flex-wrap 的复合属性。

2.3 设置伸缩项目在主轴上的对齐方式

给伸缩容器设置CSS属justify-content，可以调整伸缩项目在主轴上的对齐方式，该属性的值如下：

2.4 设置伸缩项目在侧轴上的对齐方式

① 一条主轴线（伸缩项目在主轴上不换行）

给伸缩容器设置CSS属性 align-items， 该属性的值如下：

② 多条主轴线 （伸缩项目在主轴上发生换行）

给伸缩容器设置CSS属性 align-content， 该属性的值如下：

2.5 伸缩项目的伸缩性

① 伸缩项目在主轴上的长度 flex-basis

如果设置了 flex-basis，伸缩项目在主轴上的长度就按照 flex-basis， 与主轴方向对应的 width 或者 heihgt 将不生效。
flex-basis 的默认值是 auto，表示 flex-basis 不起作用，主轴方向的长度仍然按照 width 或者 height 的设置。

② 扩展比率 flex-grow

伸缩项目扩展的前提：
伸缩项目扩展的规则：

③ 收缩比率 flex-shrink

伸缩项目收缩的前提：
伸缩项目收缩的规则：

④ flex 复合属性

  • 如果缩写为 flex: 1 , 则其计算值为 1 1 0%
  • 如果缩写 flex: auto , 则其计算值为 1 1 auto
  • 如果flex: none , 则其计算值为0 0 auto
  • 如果 flex: 0 auto 或者 flex: initial , 则其计算值为0 1 auto，即 flex 初始值

2.6 伸缩项目排序

给伸缩项目设置 order 属性，属性值是数字，值越大排序越靠后，可以是负值。

2.7 单独设置伸缩项目在侧轴上的对齐方式

给伸缩项目设置 align-self ，该属性的值：

2.8 伸缩盒相关 CSS 属性总结

① 设置给伸缩容器的属性

CSS 属性名
含义
值
display
设置伸缩容器
flex inline-flex
flex-direction
主轴方向
row row-reverse column column-reverse
flex-wrap
换行方式
nowrap wrap wrap-reverse
flex-flow
同时设置主轴方向和换行方式
ㅤ
justify-content
主轴上的对齐方式
flex-start flex-end center space-between space-around space-evenly
align-items
侧轴上的对齐方式
stretch flex-start flex-end center baseline
align-content
侧轴上的对齐方式（发生换行）
stretch flex-start flex-end center space-between space-around space-evenly

② 设置给伸缩项目的属性

CSS 属性名
含义
值
flex-basis
伸缩项目的主轴长度
auto，长度
flex-grow
扩展比率
数字，默认值0
flex-shrink
收缩比率
数字，默认值1
flex
复合属性
ㅤ
order
排序
数字
align-self
单独设置侧轴对齐
ㅤ
上一篇
前端-阶段01-HTML5&CSS3-Day16
下一篇
前端-阶段01-HTML5&CSS3-Day14
评论
Loading...
目录