关于css的flex布局,我只想说他真的解决了曾经布局中float和position中的痛苦,网上关于flex的文章很多了,在这里分享两篇好的文章(真的只有两篇)供大家学习.
一.阮一峰(不用多说很详细)
Flex 布局教程:实例篇
Flex 布局教程:语法篇
二.渔人码头
用大彩图和GIF动画解释
用大彩图和GIF动画解释-续
(有图才能有真相)
- 栅格系统Flexbox: 满足了我们大部分对于栅格系统的需求。并且尺寸、对齐仅用一两个属性就能搞定。
- 圣杯布局:这是一个经典的 css-hack 布局挑战,历史上出现的方案都没有完美解决。直到 Flexbox 布局的出现,终于成为可能。
- 输入附加组件:创建全宽度,流式的输入/按钮组在 CSS 的历史中几乎不可能。有了 Flexbox 布局,一切将会变得更简单。
- 媒体对象:创建含有固定或变化的头像的媒体对象,不用担心溢出(overflow),清除浮动(clearfixing),或者块格式化内容(block formatting context)等 hack 。
- 粘性页脚:让你的页脚粘在底部一直以来是一个技巧。如果页脚的高度未知,那么基本上就不可能了。现在不再如此。
- 垂直居中:这个经典的问题问题一直被 CSS hackers 挑战了很多年,历史的解决方案没有一个能够完整地解决。有了 Flexbox布局,终于成为了可能。