TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

FlexBox Cheatsheet

227 点作者 mozillas将近 8 年前

23 条评论

Techowl将近 8 年前
I&#x27;ve personally gotten a lot of value out of the CSS-Tricks flexbox guide [0]. It&#x27;s visual, and sufficiently comprehensive.<p>0 - <a href="https:&#x2F;&#x2F;css-tricks.com&#x2F;snippets&#x2F;css&#x2F;a-guide-to-flexbox&#x2F;" rel="nofollow">https:&#x2F;&#x2F;css-tricks.com&#x2F;snippets&#x2F;css&#x2F;a-guide-to-flexbox&#x2F;</a>
评论 #14484561 未加载
McKayDavis将近 8 年前
Since others are posting their favorite FlexBox resource, I&#x27;ll post my goto link -- The FlexBox playground by Gabi on Codepen:<p><a href="https:&#x2F;&#x2F;codepen.io&#x2F;enxaneta&#x2F;full&#x2F;adLPwv&#x2F;" rel="nofollow">https:&#x2F;&#x2F;codepen.io&#x2F;enxaneta&#x2F;full&#x2F;adLPwv&#x2F;</a><p>It was the #1 most hearted pen of 2016:<p><a href="https:&#x2F;&#x2F;codepen.io&#x2F;2016&#x2F;popular&#x2F;pens&#x2F;10&#x2F;" rel="nofollow">https:&#x2F;&#x2F;codepen.io&#x2F;2016&#x2F;popular&#x2F;pens&#x2F;10&#x2F;</a>
pookieinc将近 8 年前
At our company, we semi-recently sunset our support for IE10, which has enabled all of our frontend guys to start redoing a lot of our app using flexbox. It&#x27;s been one of the better decisions we&#x27;ve made. It&#x27;s such a joy to use, reduced dozens (if not many more) lines of positioning code and has facilitated moving &lt;divs&gt; around so much easier. The only thing we&#x27;ve run into is adding &quot;display:flex&quot; to child elements, so that we can alter the contents direction and have rows &#x2F; columns under the same parent (which has inevitably forced us to use &quot;display:flex&quot; all over the place).<p>I&#x27;m looking forward to when we can move to the CSS grid stuff personally, but at this point, we haven&#x27;t due to less browser support for IE11. That and we&#x27;re enjoying flexbox after many years of floats.
评论 #14483984 未加载
lukateake将近 8 年前
Someone here at HN once directed me to the resource so I&#x27;ll do the same: <a href="https:&#x2F;&#x2F;flexboxfroggy.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;flexboxfroggy.com&#x2F;</a>
patrickaljord将近 8 年前
How do I change values? I tried clicking but all I get is a notification saying it&#x27;s been copied to clipboard.
jamesxv7将近 8 年前
I learn more of Flexbox by reading <a href="https:&#x2F;&#x2F;hackernoon.com&#x2F;11-things-i-learned-reading-the-flexbox-spec-5f0c799c776b" rel="nofollow">https:&#x2F;&#x2F;hackernoon.com&#x2F;11-things-i-learned-reading-the-flexb...</a><p>Great complement to mentioned articles.
joekrill将近 8 年前
Is this just not working for me? I something supposed to be happening when I click the properties&#x2F;values? Even if I allow the unsafe script that Chrome warns me about, all it does is copy something to the clipboard.
daurnimator将近 8 年前
Doesn&#x27;t seem to do anything for me? ==&gt; clicking does nothing (firefox). In JS console:<p><pre><code> Blocked loading mixed active content “http:&#x2F;&#x2F;code.jquery.com&#x2F;jquery.js”[Learn More] vudav.github.io ReferenceError: $ is not defined[Learn More]</code></pre>
评论 #14485074 未加载
exodust将近 8 年前
Quick question: are we&#x2F;you using flexbox now even for critical areas such as navigation? I&#x27;ve been putting off using it for areas like top nav due to browser support, but surely now we can use it without worrying about fallbacks? I guess the answer is always &quot;depends&quot; with links to can-i-use, but wanted to hear opinions.<p>I love flexbox, it&#x27;s what we all wanted back in the day... now it&#x27;s here, it&#x27;s motivating me to code some new responsive templates from scratch, and I&#x27;m blown away how well flexbox handles nice neat responsive columns. It plays nicely with other CSS too.
评论 #14486400 未加载
bpierre将近 8 年前
My favorite one: <a href="http:&#x2F;&#x2F;apps.workflower.fi&#x2F;css-cheats&#x2F;?name=flexbox" rel="nofollow">http:&#x2F;&#x2F;apps.workflower.fi&#x2F;css-cheats&#x2F;?name=flexbox</a>
amptorn将近 8 年前
Typically a cheat sheet should explain what the things mean.
评论 #14483953 未加载
ikurei将近 8 年前
This looks fantastic to learn what some of those mean, but just to save time when using flexbox I love this <a href="http:&#x2F;&#x2F;the-echoplex.net&#x2F;flexyboxes&#x2F;" rel="nofollow">http:&#x2F;&#x2F;the-echoplex.net&#x2F;flexyboxes&#x2F;</a>. It gives you all the code for what you set up. Every time I need flexbox, I use that and then tweak a few details, takes me a minute.
idibidiartists将近 8 年前
My experience with Flexbox is that it&#x27;s a struggle to use it on its own for responsive behavior but is much easier when combined with percentage-based width, height and margins.<p>See this as an example:<p><a href="https:&#x2F;&#x2F;github.com&#x2F;idibidiart&#x2F;react-native-responsive-grid" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;idibidiart&#x2F;react-native-responsive-grid</a>
评论 #14485776 未加载
have_faith将近 8 年前
These animated flexbox examples serve me very well:<p><a href="https:&#x2F;&#x2F;medium.freecodecamp.com&#x2F;an-animated-guide-to-flexbox-d280cf6afc35" rel="nofollow">https:&#x2F;&#x2F;medium.freecodecamp.com&#x2F;an-animated-guide-to-flexbox...</a><p>Highly recommend if you haven&#x27;t memorised what each property does yet.
superasn将近 8 年前
I miss the Hbox and Vbox of adobe Flex. They were so intuitive and i think i was able to manage almost all sorts of layout which Flexbox offers (ok, maybe not all but most) without ever once consulting the docs.
ggchappell将近 8 年前
Is this supposed to be doing something? Clicking the little up&#x2F;down arrows changes the numbers, but that&#x27;s all I see happening?
oDot将近 8 年前
Flexbox is just fantastic. I use it in every project and it always makes things so easy. Helped A LOT when we built <a href="https:&#x2F;&#x2F;www.StockDroids.com" rel="nofollow">https:&#x2F;&#x2F;www.StockDroids.com</a> and when I built a screenplay editor it did a great job with the magic of a &quot;page within a page&quot;.
eriknstr将近 8 年前
I somehow misread the title as Firefox Cheatsheet and was actually excited to see if there was some neat shortcut key combinations or settings that I didn&#x27;t know of. So now that that&#x27;s said, anyone got something like this to recommend?
crazysaem将近 8 年前
The flexbugs repository is also a good resource for browser specific flexbox issues: <a href="https:&#x2F;&#x2F;github.com&#x2F;philipwalton&#x2F;flexbugs" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;philipwalton&#x2F;flexbugs</a>
wh4this将近 8 年前
A good FlexBox guide with images : <a href="http:&#x2F;&#x2F;cssreference.io&#x2F;flexbox&#x2F;" rel="nofollow">http:&#x2F;&#x2F;cssreference.io&#x2F;flexbox&#x2F;</a><p>I use it all the time while making websites, it is well explained.
adjusted将近 8 年前
<a href="https:&#x2F;&#x2F;cvan.io&#x2F;flexboxin5&#x2F;" rel="nofollow">https:&#x2F;&#x2F;cvan.io&#x2F;flexboxin5&#x2F;</a> also help generate css
lucasmullens将近 8 年前
The clipboard feature isn&#x27;t working for me
dmachinemoi将近 8 年前
wtf friends, why are we ingesting and highly rating such a quantity of flexbox explainers