跳到主要内容

网格 & 弹性布局

弹性布局​

弹性布局（Flexbox）是 CSS 中用于布局的强大工具。它提供了一种灵活的方式来排列、对齐和分布容器中的项目。

提示

在弹性布局出现之前，Tabel 布局常常被用于布局。现在在一些邮件的样式中，仍然可以看到 Tabel 布局的影子。

熟练记忆容器属性和项目属性是掌握弹性布局的关键。

容器属性​

  • flex-direction: 规定布局方向，默认值为 row。
  • flex-wrap: 规定是否换行，默认值为 nowrap。
  • flex-flow: 规定布局方向和是否换行，默认值为 row nowrap。
  • justify-content: 规定主轴对齐方式，默认值为 flex-start。
  • align-items: 规定交叉轴对齐方式，默认值为 stretch。
  • align-content: 规定多行对齐方式，默认值为 stretch。

项目属性​

  • order
  • flex-grow: 当内容超过既定的空间，是否放大
  • flex-shrink: 当空间不足以展示的时候，是否被压缩
  • flex-basis
  • flex

网格布局​

扩展阅读​

一图流