本文介绍了CSS3的伸缩盒布局，包括伸缩容器与伸缩项目的概念，如何设置主轴方向、换行方式，以及伸缩项目的对齐方式。此外，还讲解了多列布局的实现，特别是如何设置包裹元素和子元素的CSS属性，以及伸缩项目的伸缩性和排序。
多列布局-伸缩盒布局-伸缩项目
1 回顾
1.1 变换 transform
① 相关CSS属性
transform
transform-origin
transform-style
perspective
perspective-origin
backface-visibility
② 变换方法
2D 变换：
位移： translateX() translateY() translate()
缩放： scaleX() scaleY() scale()
旋转： rotate()
3D 变换：
位移： translateZ() translate3D()
缩放： scaleZ() scale3D()
旋转： rotateX() rotateY() rotateZ() rotate3D()
1.2 过渡 transition
过渡属性：
transition-property
transition-duration
transition-timing-function
transition-delay
transition
触发过渡的条件：
1. 伪类选择器 :hover :active :focus
2. JavaScript 事件
3. 媒体查询 @media
1.3 动画 animation
① 关键帧
@keyframes 关键帧的名字 {
0% {
}
100% {
}
}
② 动画相关 CSS 属性
anaimtion-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count 值 数字或者infinite
animation-direction 值 normal、reverse、alternate、alternate
animation-fill-mode 值 none、forwards、backwards
animation-play-state 值：running、paused
animation
2 多列布局
① 设置给包裹元素的 CSS 属性（共 8 个属性）
| CSS 属性名 | 含义 | 值 |
|---|---|---|
| column-count | 指定分多少列 | 数字 |
| column-width | 指定列宽 | 长度 |
| columns | 复合属性（coumnt和widh） | 数字和长度 |
| column-gap | 列间距 | 长度 |
| column-rule-width | 列之间的边框宽度 | 长度 |
| column-rule-color | 列之间的边框颜色 | 颜色 |
| column-rule-style | 列之间的边框风格 | 同 border-style |
| column-rule | 列之间的边框的复合属性 | width、color、style |
注意：
- 设置 column-count 和 column-width 都可以实现分列效果；如果二者同时设置可能会出现冲突，谁分出来的列数少就按照谁。
- 推荐使用 column-count 进行分列。
② 设置给子元素的 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：强制内部不断列 |
3 伸缩盒布局
3.1 伸缩容器和伸缩项目
伸缩容器： 一个元素设置 CSS 属性 display:flex 或者 display: inline-flex，该元素就变为伸缩容器。
伸缩项目： 伸缩容器的子元素就会变为伸缩项目。
总结：
- 伸缩项目会水平排列，可以完美的设置宽高以及内外边距，不存在外边距塌陷合并，并且具有伸缩性。
- 只有伸缩容器的子元素才是伸缩项目，子元素的子元素以及其他后代不是。
- 伸缩项目也可以作为它的子元素的伸缩容器。
/* 设置为伸缩容器 */
display: flex;
3.2 设置主轴方向和换行方式
主轴： 伸缩项目会沿着主轴排列，主轴的默认是水平的且方向是从左到右。
侧轴： 与主轴垂直的就是侧轴，侧轴默认是垂直的且从上到下。
① 设置主轴方向
flex-direction 属性可以设置主轴方向：
值：
row 默认值，水平且从左到右
row-reverse 水平从右到左
column 垂直从上到下
column-reverse 垂直从下到上
/* 设置主轴方向：水平和垂直 */
flex-direction: row; 默认值，水平且从左到右
flex-direction: row-reverse; 水平从右到左
flex-direction: column; 垂直从上到下
flex-direction: column-reverse; 垂直从下到上
② 设置换行方式
flex-wrap 属性可以设置伸缩项目的换行方式：
值：
nowrap 默认值，强制不换行
wrap 自动换行
wrap-reverse 换行且反转行的排列属性
/* 设置换行方式 */
flex-wrap: wrap;默认值，强制不换行
flex-wrap: nowrap;自动换行
flex-wrap: wrap-reverse;换行且反转行的排列属性
③ 同时设置主轴方向和换行方式
flex-flow 属性可以同时设置主轴方向和换行方式，该属性是 flex-direction 和 flex-wrap 的复合属性，值没有数量和顺序要求。
/* 该属性是 **flex-direction** 和 **flex-wrap** 的复合属性，值没有数量和顺序要求*/
flex-flow: wrap row;
flex-flow: nowrap row-reverse;
3.3 设置伸缩项目在主轴上的对齐方式
justify-content 属性可以设置伸缩项目在主轴上的对齐方式：
值：
flex-start 默认值，靠主轴起始位置对齐
flex-end 靠主轴结束位置对齐
center 居中对齐
space-between 伸缩项目在主轴上均匀分布，两端没有间隙，中间有间隙。
space-around 伸缩项目在主轴上均匀分布，两端的间隙是直接间隙的一半。
space-evenly 伸缩项目在主轴上均匀分布，两端的间隙与中间的间隙一样。
/* 设置伸缩项目在主轴上的对齐方式 */
justify-content: flex-start;默认值，靠主轴起始位置对齐
justify-content:flex-end;靠主轴结束位置对齐
justify-content: center;居中对齐
justify-content: space-around;伸缩项目在主轴上均匀分布，两端没有间隙，中间有间隙。
justify-content: space-between;伸缩项目在主轴上均匀分布，两端的间隙是直接间隙的一半。
justify-content: space-evenly;伸缩项目在主轴上均匀分布，两端的间隙与中间的间隙一样。
3.4 设置伸缩项目在侧轴上的对齐方式
① 一条主轴线（伸缩项目在主轴上不换行）
align-items 属性可以设置伸缩项目在侧轴上的对齐方式，主要用于只有一条主轴线的情况。
值：
stretch 默认值，伸缩项目在侧轴上拉伸。
flex-start 靠侧轴开始位置对齐
flex-end 靠侧轴结束位置对齐
center 居中对齐
baseline 文字基线对齐
/* 设置伸缩项目在侧轴上的对齐方式 */
align-items: stretch;
align-items: flex-start;
align-items: flex-end;
align-items: center;
align-items: baseline;
② 多条主轴线 （伸缩项目在主轴上发生换行）
align-content 属性可以设置伸缩项目在侧轴上的对齐方式，只能用于多条主轴的情况（伸缩项目发生了换行）
值：
stretch 默认值，伸缩项目在侧轴上拉伸。
flex-start 靠侧轴开始位置对齐
flex-end 靠侧轴结束位置对齐
center 居中对齐
space-between 在侧轴方向上，两端没有间隙，中间有间隙。
space-around 在侧轴方向上，两端的空隙是中间空隙的一半。
space-evenly 在侧轴方向上，两端的空隙与中间空隙一样。
/* 设置伸缩项目在侧轴上的对齐方式 */
align-content: stretch;
align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-between;
align-content: space-around;
align-content: space-evenly;
注意：
- align-items 在一条主轴或多条主轴设置对齐方式都会生效，但是我们只有在一条主轴的情况下使用该属性。
- align-content 只有多条主轴线的情况下才生效。
案例：用伸缩盒实现水平垂直居中
方案一：在父元素设置
/* 设置为伸缩容器 */ display: flex; /* 设置伸缩项目在主轴方向居中 */ justify-content: center; /* 设置伸缩项目在侧轴方向居中 */ align-items: center;
方案二：
/* 父元素设置为伸缩容器 */
display: flex;
/* 自身设置外边距 */
margin: auto;
3.5 伸缩项目的伸缩性
① 伸缩项目在主轴上的基准长度 flex-basis
需要设置一个长度作为值，概属性设置的是伸缩项目在主轴方向上的长度。 如果没有设置该属性，伸缩项目在主轴上的长度就是 width的值 或者 height的值。
② 扩展比率 flex-grow
伸缩项目发生扩展的前提： 伸缩容器在主轴方向上有富余的空间。
伸缩项目默认的扩展比率是 0。
伸缩项目在扩展的时候，按照各自的扩展比率瓜分伸缩容器的富余空间。
/* 设置伸缩项目的拓展比率 ：平均分，可不平均，单独分*/
flex-grow: 0;（平均分）
flex-grow: 1;
给各自的盒子分配不一样的扩展比率
扩展的分配规则
假设分配伸缩容器的富余空间 400
item01 分到 400 * 4/8
item02 分到 400 * 3/8
item03 分到 400 * 1/8
③ 收缩比率 flex-shrink
伸缩项目发生收缩的前提：伸缩容器在主轴方向上的长度不够（小于伸缩项目在主轴上的长度的和）
伸缩项目默认的收缩比率是 1。
伸缩项目在收缩的时候，每个伸缩项目要补一部分伸缩容器的亏空，补多少既考虑自己原本的长度也考虑收缩比率。
/* 设置收缩比率 */
flex-shrink: 1;
flex-shrink: 0;
假设收缩规则 亏空 100
item01: 100*3/(100*3+200*2+300*1) = 3/10; 30
item02: 200*2/(100*3+200*2+300*1) = 4/10; 40
item03: 300*1/(100*3+200*2+300*1) = 3/10; 30
④ flex 复合属性
flex: grow shrink basis;
复合数的简写：
flex: 1; /* flex: 1 1 0 */即扩展又收缩，平均分
flex: auto; /* flex: 1 1 auto */
flex: none; /* flex: 0 0 auto*/
flex: 0 auto; /* flex: 0 1 auto */
3.6 伸缩项目排序
给伸缩项目设置属性 order 可以调整伸缩项目排列属性。 order 属性的值是数字，值越小排序越靠前，可以是负数。
/* 让往前 */
order: -1;
/* 让往后 */
order: 200;
3.7 单独设置伸缩项目在侧轴上的对齐方式
给伸缩项目设置属性 align-self，可以单独设置该伸缩项目在侧轴上的对齐方式，属性的值与 align-items 一样。
/* 要有垂直高度自己给自己设置位置 */
align-self: flex-end;
3.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 | 复合属性，复合 basis、grow、shrink | |
| order | 设置伸缩项目排序顺序 | 数字 |
| align-self | 单独设置伸缩项目在侧轴上对齐方式 | auto： 默认值 stretch：拉伸 flex-start：靠侧轴其实位置 flex-end：靠侧轴结束位置 center：居中 baseline：文字基线对齐. |
合 basis、grow、shrink | |
| order | 设置伸缩项目排序顺序 | 数字 |
| align-self | 单独设置伸缩项目在侧轴上对齐方式 | auto： 默认值
stretch：拉伸
flex-start：靠侧轴其实位置
flex-end：靠侧轴结束位置
center：居中
baseline：文字基线对齐. |
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
