设计与产品philipwalton.github.io
用 Flexbox 解决布局问题
Solved by Flexbox
2013 — 2015，它一次次回到首页
黑点是上首页（≥ 50 分）的那次投稿，空心点是没冲上去的投稿，点越大分数越高。
导读
这是 Philip Walton 制作的「Solved by Flexbox」网站，收录了一系列用 Flexbox 解决的经典 CSS 布局难题，如圣杯布局、垂直居中、粘性页脚等，每个案例都附讲解和示例。它曾是 Flexbox 普及过程中最常被引用的参考资源之一。
为什么经久不衰：它把 Flexbox 最常见的布局痛点整理成即查即用的范例，即使今天 Flexbox 已成标配，这些案例仍是理解现代 CSS 布局思路的好教材。
HN 评论精选
作者推荐配套的 flexbugs 项目，收录 flexbox 的浏览器兼容问题与绕过方案。
Solved by Flexbox 的作者在这里。如果你今天正在使用 flexbox，建议也看看我的另一个仓库 flexbugs——一个由社区维护的 flexbox 已知问题及跨浏览器解决方案清单。
philipwalton查看英文原文
Solved by Flexbox creator here. I wanted to add that if you're using flexbox today, you should also check out this other repo of mine: https://github.com/philipwalton/flexbugs A community-curated list of flexbox issues and cross-browser workarounds for them.
批评 flexbox 语法不直观，属性语义随方向变化，学习成本高。
这个网站不错。但 flexbox 本身的语法很令人困惑：row/column 不如直接叫 horizontal/vertical；justify-content 和 align-items 的含义会随 row 还是 column 而变化，为什么不直接用 hor-align、ver-align？想让一个盒子拉伸高度，直觉上完全猜不出要用 flex: 1。甚至把段落 margin 写成 1em 1em 1em 1em 会破坏水平对齐，写成 1px 却正常，实在莫名其妙。
alexashka查看英文原文
Solved by flexbox is nice. Regarding flexbox itself: the syntax is confusing. After working on html/css, leaving, using auto-layout (obj-c, ios) and coming back to trying flexbox, I am scratching my head, who came up with this? row/column - use horizontal/vertical or hor/ver for short. justify-content and align-items mean different things depending on whether you're using row or column - what? why not just have hor-align, ver-align? Suppose you want a box with 3 paragraphs left-aligned, centered on the screen and a footer with 1 paragraph, aligned with the 3 paragraphs above it, how do you do this? Here's my pseudo-code: body ver nowrap, hor-align center. add 2 flex boxes ver nowrap. box 1 height stretch, hor-align left, ver-align center. box 2 height fit-content, hor-align left, ver-align center. add 3 paragraphs to box 1. add 1 paragraph to box 2. In reality, it is: body flex: column nowrap, justify-content: center, or is it align-items? I don't know, let's guess. How do I do box 1 height stretch? Hm... I don't intuitively know because nothing intuitively makes sense with flexbox. The answer turns out to be flex: 1 on box 1 and flex: 0 on box 2. Great syntax. And the pain continues. Btw, if you set the paragraph margin to 1em 1em 1em 1em;, it breaks the horizontal alignment of the paragraphs, making them center-aligned, why? Only God knows. If you set margin: 1px 1px 1px 1px, it works as expected. What?! Flexbox is light years ahead of the retardation that is floats and clears and the rest of it but it is a FAR cry from auto-layout. Let me set the height of an element... in relation to another element... ANY element... Why am I doing flex: 2, flex: 1 but that only works for sibling elements? What if I want box 1 width to be 20% of the height of box 2 that's elsewhere on the page? How do I do that in flexbox? Even if there is a way, the fact that I don't know and I've spent 2 days figuring it out says it all.
推荐一个可视化学习 flexbox 的实时演示工具。
推荐一个非常不错的实时 flexbox 模拟工具：http://flexboxin5.com/
bronlund查看英文原文
It's worth mentioning that the flexbox standard has gone through three major revisions, each with very different syntax. To extend the usefulness somewhat to older browsers it's possible to mix the different versions. See this article at CSS-Tricks for some examples https://css-tricks.com/using-flexbox/
指出圣杯布局在移动端缩放和文字重排上存在严重体验问题。
遗憾的是，圣杯布局在移动端表现很差：在最新的 Android 版 Chrome 和 Firefox 上，双指缩放手势要么完全失效，要么整个 div 被当作图片缩放而不重排文字（左右文字被裁掉）。似乎还存在强制最小宽度。改变手机方向时文字会重排，所以问题应该出在浏览器缩放页面的方式上。最糟的是这种布局正在迅速蔓延，我被迫以固定字号阅读大多数现代网站。
TuringTest查看英文原文
Unfortunately, the Holy Grail layout works like crap in mobile. In the most recent Chrome and Firefox for Android, the pinch-to-zoom gesture either doesn't work at all, or the whole div is resized as an image without text reflow (i.e. cropping text lines to the left and right). Also there seems to be a forced minimum width, under which the web pace can't be made smaller; this is awful for navigating long pages, or when the default font size is too big. Changing the phone orientation does reflow the text, so I assume that the problem is with how these browsers resize the web page under pinch-and-zoom in a way that the CSS doesn't detect. The funny thing is that the same browsers on desktop work like a breeze when resizing text with the wheelmouse, or resizing the window. Why does it not work the same on the phone? The worst thing is that the layout seems to be spreading like fire. I'm forced to read most major modern websites at fixed font size.
历次讨论
同类还值得读
贝塞尔曲线入门
A Primer on Bézier Curves
Pomax 编写的贝塞尔曲线在线教程，从基础概念一路讲到曲线求交、投影、曲率等进阶内容，并配有可交互的示例和配套的 bezier.js 库。
设计与产品上首页 7 次 · 2014–2022pomax.github.io编辑精选WebGL 水面模拟
WebGL Water
Evan Wallace 制作的 WebGL Water 演示：在浏览器里实时渲染一片水面，展示折射、反射和焦散等 GPU 图形效果。
设计与产品上首页 6 次 · 2011–2025madebyevan.com设计建议：永远不要使用黑色
Design Tip: Never Use Black
设计随笔提出“永远不要用纯黑”的建议，主张在界面和绘画中改用深灰或带色相的暗色，并借阴影与色彩关系来论证。
设计与产品上首页 5 次 · 2012–2021ianstormtaylor.com用于思考不可想象之物的媒介
Media for Thinking the Unthinkable
Bret Victor 的这个页面围绕《Media for Thinking the Unthinkable》展开，探讨我们用来思考和表达复杂问题的媒介，以及以文字/符号为主的传…
设计与产品上首页 5 次 · 2013–2020worrydream.com编辑精选页面重量很重要
Page Weight Matters
博文讲 YouTube 工程师 Chris Zacharias 的一次页面瘦身实验：团队做了一个更轻量的页面版本，起初从整体平均加载时间看反而更慢；按地理区域分层后才发现，轻量版…
设计与产品上首页 4 次 · 2012–2022blog.chriszacharias.com