Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

纯 CSS 实现瀑布流布局 #40

Open
chokcoco opened this issue Nov 22, 2018 · 1 comment
Open

纯 CSS 实现瀑布流布局 #40

chokcoco opened this issue Nov 22, 2018 · 1 comment
Assignees
@chokcoco
Labels
原理

Comments

@chokcoco
Copy link
Owner

chokcoco commented Nov 22, 2018 •
edited
Loading

CSS实现瀑布流布局（display: flex）

  • 本例使用 CSS flex 实现瀑布流布局
  • 关键点，横向flex布局嵌套多列纵向flex布局，使用了 vw 进行自适应缩放

https://codepen.io/Chokcoco/pen/wYgYXX

CSS实现瀑布流布局（column-count）

  • 本例使用 CSS column 实现瀑布流布局
  • 关键点，column-count -- 元素内容将被划分的最佳列数
  • 关键点，break-inside -- 避免在元素内部插入分页符

https://codepen.io/Chokcoco/pen/LgjazE?editors=1100

CSS实现瀑布流布局（display: grid）

+本例使用 CSS grid 实现瀑布流布局

  • 使用 grid-template-columns、grid-template-rows 分割行列
  • 使用 grid-row 控制每个 item 的所占格子的大小

https://codepen.io/Chokcoco/pen/KGXqyo
@chokcoco chokcoco self-assigned this Nov 22, 2018
@chokcoco
Copy link
Owner Author

chokcoco commented Mar 7, 2019

当然，有点 伪 瀑布流的感觉~

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

@chokcoco chokcoco

Labels
原理
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@chokcoco