Solved by Flexbox

2017-05-29 16:35:01 +08:00
 Livid
用 Flexbox 实现一些复杂布局的例子:

https://philipwalton.github.io/solved-by-flexbox/

中文版: https://hufan-akari.github.io/solved-by-flexbox/

目前 Flexbox 已经在所有主要浏览的当前版本中得到支持:

http://caniuse.com/#feat=flexbox

比如经典的 3 栏布局用 Flexbox 的实现:

https://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/
4846 次点击
所在节点    CSS
9 条回复
k9982874
2017-05-29 16:43:44 +08:00
垂直居中这个痛点解决了,cheers ~
ersic
2017-05-29 16:53:43 +08:00
最近搞微信小程序,也在看 Flexbox 布局
POPOEVER
2017-05-29 17:24:31 +08:00
一直用 flex 来做垂直居中,也有一些基于 flexbox 的框架,比如 http://bulma.io/

最近在看 CSS Grid,蛮好玩的,大家可以去找 CSS Grid 规范的主要贡献者 Jen Simmons 和 Rachel Andrew 的教学视频
Tunar
2017-05-29 17:25:50 +08:00
flex 垂直居中爽飞了
Myflos
2017-05-29 18:51:09 +08:00
POPOEVER
2017-05-29 19:27:20 +08:00
Flex 其实最实用的是在表单的自适应实现上
Mutoo
2017-05-29 21:11:53 +08:00
flex 在 responsive design 上的实现也是非常方便,flex-direction 直接可以切换 row/column 布局。
seki
2017-05-29 22:22:24 +08:00
ljcarsenal
2017-05-30 17:10:58 +08:00
这个不错

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/364598

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX