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

科技回声

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

GitHubTwitter

首页

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

资源链接

HackerNews API原版 HackerNewsNext.js

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

Flexbox Adventures

155 点作者 stelian超过 10 年前

14 条评论

benvds超过 10 年前
This makes doing layouts in css so much easier. I can&#x27;t wait until we can drop al the grid frameworks and use this instead.<p>Another good explanation on CSS-Tricks: <a href="http://css-tricks.com/snippets/css/a-guide-to-flexbox/" rel="nofollow">http:&#x2F;&#x2F;css-tricks.com&#x2F;snippets&#x2F;css&#x2F;a-guide-to-flexbox&#x2F;</a> Browser support: <a href="http://caniuse.com/#search=flexbox" rel="nofollow">http:&#x2F;&#x2F;caniuse.com&#x2F;#search=flexbox</a>
评论 #8784027 未加载
kristiandupont超过 10 年前
This little tool is neat for making quick flexbox structures: <a href="http://maxsteenbergen.com/fibonacci/" rel="nofollow">http:&#x2F;&#x2F;maxsteenbergen.com&#x2F;fibonacci&#x2F;</a>
评论 #8784016 未加载
评论 #8783008 未加载
speg超过 10 年前
How does this work responsively? I was initially reading this on my phone, and the first example says the middle item is not allowed to grow so the left and right have been given an equal share so they are sized evenly.<p>Except on my phone I was seeing the left and middle taking up 50% and the right one being pushed down and taking up 100%.
评论 #8784007 未加载
评论 #8783799 未加载
andrewingram超过 10 年前
Here&#x27;s my favourite example of a layout that to the best of my knowledge, you can&#x27;t solve with flexbox. I&#x27;ve only been able to solve it with JavaScript<p>A grid representation of a list, let&#x27;s say a list of image thumbnails along with small amount of other data. Something like the image grid in iPhoto.<p>What&#x27;s so hard? Let me expand the requirements. I want the dimensions of each item to be identical, let&#x27;s say a square. I also want each item to be as close to a specific size as possible, but scaled up or down slightly to allow each row of items to exactly fit the width of the containing element. With the exception of the last row, which is allowed to be unfilled.<p>You can <i>nearly</i> do this with flexbox. The only problem is that the elements in the last row will be stretched to fill the row if it&#x27;s short a few items. It&#x27;s also fairly awkward ensuring the height of an element matches it&#x27;s width, the current solution seems to be a hack involving padding-bottom.<p>I&#x27;m planning on trying out <a href="http://gridstylesheets.org/" rel="nofollow">http:&#x2F;&#x2F;gridstylesheets.org&#x2F;</a> to see if it&#x27;s expressive enough for what I want. Of course, the catch is that I&#x27;m still depending on JavaScript.
评论 #8784391 未加载
评论 #8784408 未加载
altano超过 10 年前
If flex hasn&#x27;t completely changed how you write layout related CSS, and it isn&#x27;t because of legacy browser support, you&#x27;re missing out.<p>I also recommend this guide which is very visual and helped me a lot: <a href="http://css-tricks.com/snippets/css/a-guide-to-flexbox/" rel="nofollow">http:&#x2F;&#x2F;css-tricks.com&#x2F;snippets&#x2F;css&#x2F;a-guide-to-flexbox&#x2F;</a>
评论 #8784076 未加载
simpleblend超过 10 年前
Great post. Just used Flexbox for the first time on a production site and it&#x27;s working great. I did have to use significant fallbacks for IE though, but that&#x27;ll soon be a thing of the past.
评论 #8783935 未加载
qntmfred超过 10 年前
I remember about 4 years ago I discovered flexbox but of course it didn&#x27;t have good browser support yet and there were even a few other competing proposed CSS solutions.<p>Just last month I started using it on a production application for the first time. We all talk about the web moving fast, but 4 years is a long damn time to have to wait. Especially considering I was doing a lot of WPF&#x2F;Silverlight at the time as well and this type of layout support was built in from the start.
评论 #8783124 未加载
mcguire超过 10 年前
Can we get a new rule? &quot;In the first few paragraphs of &quot;introduction to X&quot; or &quot;all about Y&quot;, mention what X or Y is?<p>Please?
_greim_超过 10 年前
Looking forward to using this once IE8 drops off the radar (never mind IE10). I considered using it with fallbacks, but deemed it to be not worthwhile since A) I had to limit flexbox to whatever the alternate scheme (display:table-cell in this case) could do, B) I was basically maintaining and debugging two separate layouts at that point.
评论 #8783486 未加载
niklasni1超过 10 年前
I&#x27;m using a multitude of nested flexboxen in a web app currently in testing and it&#x27;s working well. There may be theoretical performance issues and slightly odd behaviour at points but nothing I&#x27;ve noticed -- main thing is all the layout-juggling JS I didn&#x27;t have to write...
jarnix超过 10 年前
Wow it&#x27;s really impressive.
SimeVidas超过 10 年前
<i>“…while helpful tools like grunt-autoprefixer will feel like magic, my personal experience with them has shown them not to be so perfect.”</i><p>Can the author elaborate?
ptb超过 10 年前
Flexbox syntax reference: <a href="http://ptb2.me/flexbox/" rel="nofollow">http:&#x2F;&#x2F;ptb2.me&#x2F;flexbox&#x2F;</a>
paxtonab超过 10 年前
According to caniuse.com it is fully supported on all major browsers now too.
评论 #8783134 未加载