Skip to main content

认识 flex 布局

Docs

  • Flexbox 翻译为弹性盒子：

    • 弹性盒子是一种用于按行或按列布局元素的一维布局方法 ;
    • 元素可以膨胀以填充额外的空间，收缩以适应更小的空间;
    • 通常我们使用 Flexbox 来进行布局的方案称之为flex 布局 (flex layout);

  • flex 布局是目前 web 开发中使用最多的布局方案：

    • flex 布局（Flexible 布局，弹性布局）;
    • 目前特别在移动端可以说已经完全普及;
    • 在PC 端也几乎已经完全普及和使用，只有非常少数的网站依然在用浮动来布局;

  • 为什么需要 flex 布局呢？

    • 长久以来，CSS 布局中唯一可靠且跨浏览器兼容的布局工具只有 floats 和 positioning。
    • 但是这两种方法本身存在很大的局限性, 并且他们用于布局实在是无奈之举;

  • 原先的布局存在的痛点

    • 比如在父内容里面垂直居中一个块内容。
    • 比如使容器的所有子项等分可用宽度/高度，而不管有多少宽度/高度可用。
    • 比如使多列布局中的所有列采用相同的高度，即使它们包含的内容量不同。

  • flex 布局的出现

    所以长久以来，大家非常期待一种真正可以用于对元素布局的方案：于是 flex 布局出现了;

    • Nature and nature's laws lay hid in night; God said "Let Newton be" and all was light.
    • 自然与自然的法则在黑夜隐藏，于是上帝说，让牛顿出现吧！于是世界就明亮了起来。

  • flexbox 在使用时，我们最担心的是它的兼容性问题：我们可以在 Can I use... Support tables for HTML5, CSS3, etc 上查询到具体的兼容性。