重学 CSS – Flex

本文深入探讨了CSS Flex布局的核心概念和应用。文章详细介绍了Flex容器和Flex子项的各种属性,包括flex-direction、flex-wrap、justify-content等,并提供了实现居中布局的多种方法。对于想要掌握现代CSS布局技术的开发者来说,这是一篇不可多得的学习资料。

Flex 容器与 Flex 子项的属性

flex容器

flex-direction

• row（默认）
• row-reverse
• column
• column-reverse

flex-wrap

• no-wrap（默认）
• wrap
• wrap-reverse

flex-flow

= [flex-direction] [flex-wrap]

justify-content

• flex-start
• flex-end
• center
• space-around
• space-between
• space-evenly

align-items

• stretch（默认）
• flex-start
• flex-end
• center
• baseline

align-content（当 flex-wrap: no-wrap 时，此属性不生效）

• stretch（默认）
• flex-start
• flex-end
• center
• space-around
• space-between
• space-evenly

flex子项

order

默认 0，改变某个子元素的排序位置

flex-grow

默认 0，表示不占用剩余空间扩展自己的宽度

• 单个元素

  • = 1: 将所有剩余空间用于扩展自己的宽度

  • < 1: 将按比例将剩余空间扩展自己的宽度（比如：flex-grow: 0.5, 总长度 = 100，则扩展的空间 = 100×0.5 = 50）
• 子元素相加之和 > 1，按比例分配全部剩余空间（比如：总长度 = 100，A=1，B=3，则 A = 25，B=75，剩余空间=0）
• 子元素相加之和 < 1，则按子元素所设的小数比例分配（比如: 总长度 = 100，A=0.1, B=0.2，则 A=10，B=20，剩余空间=70）

flex-shrink

默认 1，表示将全部多余的空间用于自己宽度的收缩。默认就是会收缩的

• 单个元素：

  • =1: 收缩的宽度 = 多余的宽度 x 1

  • < 1: 收缩的宽度 = 多余的宽度 x flex-shrink
• 多个元素
  • 子元素相加之和 > 1，按比例收缩全部空间，这个计算公式比较复杂，具体为： 分母 = A 的宽度 x A 的 flex-shrink + B 的宽度 x B 的 flex-shrink 的值 + … A 收缩的宽度 = A 的宽度 x A 的 flex-shrink / 分母 B 收缩的宽度 = B 的宽度 x B 的 flex-shrink / 分母
  • 子元素相加之和 < 1，则只按相加之和的比例收缩部分空间，剩余空间保留

flex-basis

默认是 auto 指定了元素在主轴上的初始大小，和 width 类型，但在 flex 主轴上优先于 width,height

flex

flex-grow, flex-shrink, flex-basis 的组合

align-self

默认值是 auto，控制单独某一个 flex 子项的垂直对齐方式

上下左右居中布局

实现居中布局的几种方式

内联元素

1. 设置行高 只支持单行，不支持多行

.container {
  width: 100px;
  height: 100px;
  .text {
    line-height: 100px;
    text-align: center;
  }
}

2. flex 布局, justify-content + align-items 最佳方式

.container {
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  .text {
  }
}