Skip to content

Instantly share code, notes, and snippets.

@jasonzhouu

jasonzhouu/holy-grail-layout-with-flexbox.md

Last active March 25, 2020 02:09
Show Gist options
  • Save jasonzhouu/e23e28b492f6b93d28d99665d2cf7529 to your computer and use it in GitHub Desktop.
Save jasonzhouu/e23e28b492f6b93d28d99665d2cf7529 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
holy-grail-layout-with-flexbox.md

用flexbox实现圣杯布局，代码很直观，进行2次flex排列：

  • 上中下：flex-direction=column
    • 中间部分 flex-grow=1，占据所有剩余空间
    • 上下部分 flex-grow=0（默认值，可以不设置）
  • 左中右：flex-direction=row（默认值）
    • 左边栏order=-1（负一），排在最左边
    • 左右边栏基准尺寸 flex-basis=100px，flex-grow=0（默认值）
    • 中间部分flex-grow=1，占据所有剩余空间

image image

参考：https://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment