JobbyM's Blog

一日一练-CSS 了解Flexbox

名词解释

flexbox:弹性盒子

什么是 flexbox

flexbox 是一种用于按行或案列布局元素的一维布局方法。元素可以膨胀以填充额外的空间,收缩以适应更小的空间。

为什么是 flexbox

长久以来,CSS 布局中唯一可靠且跨浏览器兼容的创建方式只有 floats 和 positioning。这两种方式大部分清空下都很好用,但是在某些方法它们具有一定的局限性。

以下简单的布局需求是难以或不可能用这样的工具 floats 和 positioning 方便灵活得实现:

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