一行代码网页响应式布局*

*10 个现代 CSS 布局和大小调整技术,重点介绍单行样式代码的健壮和影响力.

01. Super Centered:空间居中布局 place-items: center

Current Browser Support:
  • Edge
  • Firefox
  • Chrome
  • Safari

02. The Deconstructed Pancake:并列式布局 flex: 0 1 <baseWidth>

Current Browser Support:
  • Edge
  • Firefox
  • Chrome
  • Safari

03. Sidebar Says:两栏式布局 grid-template-columns: minmax(<min>, <max>) ...

Current Browser Support:
  • Edge
  • Firefox
  • Chrome
  • Safari

04. Pancake Stack:三明治布局 grid-template-rows: auto 1fr auto

Current Browser Support:
  • Edge
  • Firefox
  • Chrome
  • Safari

05. Classic Holy Grail Layout:圣杯布局 grid-template: auto 1fr auto / auto 1fr auto

Current Browser Support:
  • Edge
  • Firefox
  • Chrome
  • Safari

06. 12-Span Grid:12 格网格 grid-template-columns: repeat(12, 1fr)

Current Browser Support:
  • Edge
  • Firefox
  • Chrome
  • Safari

07. RAM (Repeat, Auto, Minmax):重复自动排列 grid-template-columns: repeat(auto-fit, minmax(<base>, 1fr))

Current Browser Support:
  • Edge
  • Firefox
  • Chrome
  • Safari

08. Line Up:卡片 justify-content: space-between

Current Browser Support:
  • Edge
  • Firefox
  • Chrome
  • Safari

09. Clamping My Style clamp(<min>, <actual>, <max>)

Current Browser Support:
  • Edge
  • Firefox
  • Chrome
  • Safari

10. Respect for Aspect aspect-ratio: <width> / <height>

Current Browser Support:
  • Edge
  • Firefox
  • Chrome
  • Safari