跳到主要内容

最终的Flexbox备忘单

+$If you're a web designer then we really shouldn't need to be telling you about Flexbox by now. Even non-web people have got the idea that it's a powerful响应式网页设计+$tool for creating pages that arrange page layouts in a predictable way to look good in any viewport.

+$Knowing it's good, however, isn't the same as being able to actually use it, and while there's not actually great deal to the Flexbox specification, figuring out how it all fits together can feel like a bit of an uphill struggle.

我们的+$web designer's guide to Flexbox+$is the perfect way to get to grips with it, but if you're having trouble getting all the various elements to stick in your head, we've found lovely Flexbox cheat sheet that you'll want to keep bookmarked.

+$So if you're having trouble telling your flex-grow from your stretch, head over to FLEX. It's the work of Chris Malven at+$Malven Co.+$, an interactive design and development studio based in Iowa, and it contains all the most important Flexbox properties you're going to need, presented in a simple visual manner that doesn't bog you down in wordy explanations.

Flexbox cheat sheet

+$FLEX puts all those Flexbox properties you need at your fingertips

+$(Image credit: Malven Co.)

+$Instead, it shows what each property does via a wonderfully minimal image; simply find the property you want to use and click on it, and FLEX will copy the code you need straight to your clipboard. Easy!

+$Malven explains that while many Flexbox resources are brilliant for learning the details of how things work, there's too much going on for them to serve as quick references. "I wanted something that was as visually condensed as possible," he says, "and easy to scan visually. I need to see what elements styled using each properly will look like."

+$And so he built FLEX as a visual Flexbox cheat sheet; he says he uses it all the time and that it's helped him to become truly comfortable with the Flexbox syntax.

+$You can find FLEX这里+$; if you find it useful and wish there was a similar resource for CSS Grid Layout, then guess what? You're in luck; Malven has built that very thing in the form of+$GRID+$, which lays out all the CSS Grid properties in a similarly digestible format.

相关文章:



翻译字数超限