Flex 弹性布局总结

一. Flex 弹性布局简介

---

1. CSS 的布局模式

• CSS 拥有多种的布局模式，以应对各种场景下的位置关系
• CSS 主要的布局模式有：
  • 块布局
  • 行内布局
  • 表格布局
  • 定位布局
  • 浮动布局
  • 媒体查询
  • Flex 弹性布局
  • Grid 网格布局

2. Flex 弹性布局概念

• 弹性布局是指通过调整其内元素的宽高，从而在任何显示设备上实现对可用显示空间最佳填充的能力
• 弹性容器扩展其内元素来填充可用空间，或将其收缩来避免溢出

二. Flex 弹性布局实战

---

1. 相关术语

Flex 弹性布局相关术语

2. 弹性容器

• 使用 Flex 弹性布局需要定义一个容器，表明该容器内部使用 Flex 弹性布局

.box { display: flex; }
.box { display: inline-flex; }

• 设置 Flex 布局以后，子元素的 flex、clear 和 vertical-align 属性将会失效

3. 弹性项目

• 弹性容器的每个子元素都称为弹性项目
• 弹性容器直接包含的文本将被包裹成匿名弹性单元

4. 定义主轴与换行

• 使用 flex-direction 在 弹性容器 中定义 Flex 弹性布局的主轴以及主轴方向

.box { flex-direction: row ( default ) | row-reverse | column | column-reverse ; }

row（默认）：主轴为水平，方向为从左至右

row-reverse：主轴为水平，方向为从右至左

column：主轴为垂直，方向为从上至下

column-reverse：主轴为垂直，方向为从下至上

• 使用 flex-wrap 在 弹性容器 中定义当 弹性项目 溢出时该如何换行

.box { flex-wrap: nowrap ( default ) | wrap | wrap-reverse ; }

nowrap（默认）：不换行，将会拉伸弹性项目

wrap：正常换行

wrap-reverse：溢出的部分在反方向换行

• 使用 flex-flow 属性在 弹性容器 上同时定义 flex-direction 和 flex-wrap 属性

.box { flex-flow:   ; }

5. 弹性项目的排布

• 使用 justify-content 属性在 弹性容器 上定义在当前行上，弹性项目 沿主轴如何排布

.box { justify-content: flex-start ( default ) | flex-end | center | space-between | space-around ; }

flex-start（默认）：左对齐

flex-end：右对齐

center：居中

space-between：两端对齐，项目之间的间隔都相等

space-around：分散对齐，项目两侧的间隔相等

• 使用 align-items 属性在 弹性容器 上定义在当前行上，弹性项目 沿侧轴如何排布
  • 如果 弹性项目 具有实际高度，默认的排布方式为 flex-start
  • 如果 弹性项目 未设置高度或设为 auto，默认的排布方式为 stretch

.box { align-items: flex-start | flex-end | center | baseline | stretch ; }

flex-start：按侧轴的起点对齐

flex-end：按侧轴的终点对齐

center：按侧轴的中点对齐

baseline：按弹性项目第一行文字的基线对齐

stretch：弹性项目将会占满整个弹性容器的高度

• 使用 align-content 属性在 弹性容器 上定义在多个主轴的情况下，弹性项目 在侧轴上如何排布

.box { align-content: flex-start | flex-end | center | space-between | space-around | stretch ; }

flex-start：按侧轴的起点对齐

flex-end：按侧轴的终点对齐

center：按侧轴的中点对齐

space-between：按侧轴两端对齐，轴线之间的间隔平均分配

space-around：按侧轴分散对齐，每根轴线的两侧间隔都相等

stretch：弹性项目在每个轴上平均占满整个侧轴

6. 弹性项目的顺序

• 使用 order 属性在 弹性项目 上定义 弹性项目 的顺序

.flex-item { order: ; } // default: 0

括号内的值为弹性项目的 order 属性值

7. 弹性项目的放大比例

• 使用 flex-grow 属性在 弹性项目 上定义 弹性项目 的放大比例
• flex-grow 属性的默认值为 0，即如果存在剩余空间，也不会放大
• 弹性项目将按照各自的 flex-grow 属性值成比例的放大

.flex-item { flex-grow: ; } // defalut: 0

• 括号内表示弹性项目 flex-grow 属性的值
  
  

  按照 0：2：1 放大
  
  
  

  按照 1：1：2 放大

8. 弹性项目的缩小比例

• 使用 flex-shrink 属性在 弹性项目 上定义 弹性项目 的缩小比例
• flex-shrink 属性的默认值为 1，即如果空间不足，该弹性项目将会缩小
• 弹性项目将按照各自的 flex-shrink 属性值成比例的缩小

.flex-item { flex-shrink: ; } // default: 1

按照 0：1：1 缩小

按照 2：1：2 缩小

9. 弹性项目的初始大小

• 使用 flex-basis 属性在 弹性项目 上定义 弹性项目 在主轴方向上的初始大小
• flex-basis 属性会根据当前的主轴相应覆盖 弹性项目 的 height 或 width 属性

.flex-item { flex-basis:  | auto ; } // default: auto

10. 弹性项目的放大缩小和大小的简写

• 使用 flex 属性在 弹性项目 上定义 flex-grow、flex-shrink 和 flex-basis 属性的简写

.flex-item { flex:    ; }

11. 单个弹性项目在侧轴的排布方式

• 使用 align-self 属性在 弹性项目 上定义单个弹性项目如何在侧轴上进行排布，这个定义会覆盖由 align-items 属性所确立的默认值