CSS总结 • 【第8章 弹性布局：flex】

全部章节 >>>>

---

CSS3 弹性布局：flex

主轴方向：flex-direction

• 默认、水平从左往右：row 水平从右往左：row-reverse
• 垂直从上往下：column 垂直从下往上：column-reverse

元素在主轴的对齐方式：justify-content

• 默认、左对齐：flex-start 右对齐：flex-end 居中：center
• 元素间距相等：space-between 元素两端间距相等：space-around
• 元素间距与两端间距相等：space-evenly

换行方式：flex-wrap

• 默认、不换行：nowrap
• 换行：wrap 逆方向换行：wrap-reverse

对齐div元素：align-items

• 默认、填满父级宽高：stretch
• 居中：center 位于开头：flex-start 位于结尾：flex-end
• 基线：baseline 设置为默认：initial 继承：inherit

多项多轴线的对齐方式，一个轴线没有作用：align-content
- 默认、轴线占满整个交叉轴：stretch
- 交叉轴起点：flex-start 交叉轴终点：flex-end 交叉轴中点：center
- 交叉轴两端，间隔平均分布：space-between
- 每根轴线两侧的间隔都相等：space-around

CSS3 弹性布局属性

排列顺序，数值越小。排列越靠前：order

• 默认：0

放大比列：flex-grow

• 默认：0

缩小比列：flex-shrink

• 默认：1

在分配多余空间之前，项目占据的主轴空间：flex-basis

• 默认：auto

复合样式：flex

• 基本写法：放大比例 缩小比例 占据的主轴空间

单个或多个项目的对齐方式：align-self、可覆盖align-items属性

• 默认：auto 填满父级宽高：stretch
• 居中：center 位于开头：flex-start 位于结尾：flex-end
• 基线：baseline 设置为默认：initial 继承：inherit