8-8Flex学习笔记

Flex 容器技术

1、背景知识

• 传统布局：基础盒模型
• 定位：将元素放在一个可以看到的位置
• 浮动：最初的目标是为了图文混排
• 页面中的元素：水平排列，垂直堆叠
• 表格布局：最初的布局技术
• DIV+CSS
• Flex:弹性盒布局

---

2、Flex

• 2009 年，随着移动端的出现，W3C 提出 Flex 弹性盒响应式布局
• Flex: Flexible Box 弹性盒
• Flex 容器：标记 display:flex;属性的 DIV 盒子
• Flex 项目：Flex 的子元素
• Flex 项目特征：项目自动转为行内块（水平排列，支持高宽）；项目默认水平方向排列；当项目的宽度之和大于容器宽度之和时，会自动缩小宽度。
• Flex 主轴和交叉轴，主轴：水平方向，交叉轴：垂直方向
• Flex 排列：Flex 项目会优先沿主轴方向排列，当排列不下时，会沿交叉轴方向溢出排列
• Flex 剩余空间：当 Flex 项目无法完全充满主轴方向时，会在主轴方向末端产生剩余空间
• Flex 主轴方向：用 flex-direction 属性设置，默认：row 方向（水平从左向右）
• Flex 主轴方向：row-reverse(水平从右向左)，column(垂直从上向下)，column-reverse(垂直从下向上)
• Flex 项目换行：用 flex-wrap 属性设置，默认：nowrap(不换行，显示不下会收缩)，wrap(不收缩，交叉轴方向换行)，wrap-reverse(不收缩，交叉轴方向逆向换行)
• Flex 项目换行简写：用 flex-flow 属性设置，格式 flex-flow:主轴方向 换行方式。
• Flex 项目对齐：所有项目整体设置对齐，用 flex-content 属性设置，默认 flex-start（对齐主轴起始位置），flex-end(对齐到主轴终点)，center(居中对齐)，space-between(分布打散,两边项目贴边，中间均布)，space-around(每个项目左右两侧空间相等，相邻不叠加)，space-evenly(每个项目左右两侧空间完全相等，相邻叠加)
• Flex 项目交叉轴方向对齐：
  • • 单行容器用 align-items 属性设置，默认 flex-start(对齐到交叉轴起始位置)，flex-end(对齐到交叉轴末端位置)，center(居中对齐)
  • • 多行容器用 align-content 属性设置，先设置 stretch 取消交叉轴方面拉伸，其他值同主轴方向对齐方式
• Flex 项目排序：用 order 属性设置，数值越小越靠前，可以负数
• Flex 单个项目对齐：用选择器先选中单个项目，然后用 align-self 设置交叉轴方面对齐，此项仅能对单行容器奏效

---

3、容器属性汇总

序号	属性	描述
1	flex-direction	主轴方向（项目的排列方向）row(水平，默认)，column(垂直方向)，后面加个 reserve 表示反向
2	flex-wrap	主轴方向上排列不下时，换行排列，默认 nowrap 不换行
3	flex-flow	前两项的简写
4	justify-content	主轴上的对齐方式
5	align-items	交叉轴上的对齐方式
6	align-content	在多根轴线上的对齐方式

---

4、Flex 项目属性

序号	属性	描述
1	order	项目的排序权值，值越小越靠前，可以是负数
2	flex-grow	项目放大因子，默认 0，不放大，必须有可以放大的剩余空间
3	flex-shrink	项目的缩小因子，默认 0，不缩小，空间不足时用
4	flex-basis	项目占主轴空间的大小，默认 auto，原始大小，优先级高于 min-width/height，低于 width/height
5	flex	2\3\4 项的简写，参数按顺序，空格分隔
6	align-self	单个项目在容器中的对齐方式，默认 auto