来自CSS Tricks上的一个教程,原文为:A Complete Guide to Flexbox。文中详细的介绍了新版的弹性盒子的相关属性,并且给出了几个使用例子。是新手入门flexbox的一个优秀教程。当然里面的内容也大部分是根据w3c的文章来写的。里面的每个属性都给出了一张示例图,非常容易理解。本人根据其思路,结合中文翻译,写出了一篇flexbox的完整教程,希望对大家有用。
弹性布局(flexible box)模块(目前是w3c候选的推荐)旨在提供一个更加有效的方式来布置,对齐和分布在容器之间的各项内容,即使它们的大小是未知或者动态变化的。
弹性布局的主要思想是让容器有能力来改变项目的宽度和高度,以填满可用空间(主要是为了容纳所有类型的显示设备和屏幕尺寸)的能力。
最重要的是弹性盒子布局与方向无关,相对于常规的布局(块是垂直和内联水平为基础),很显然,这些工作以及网页设计缺乏灵活性,无法支持大型和复杂的应用程序(特别当它涉及到改变方向,缩放、拉伸和收缩等)。
注意: Flexbox布局是最合适的一个应用程序的组件,以及小规模的布局,而网格布局是用于较大规模的布局。
基础知识
由于flexbox是一个整体模块,而不是单一的一个属性,它涉及到了很多东西,包括它的整个属性集。它们之中有一些是在父容器上设置,而有一些则是在子容器上设置。
如果经常布局基于块和内嵌流方向,柔性布局基于“柔性流动方向”。请看看这个数字从规范,解释背后的柔性布局的主要思路。
更多详情请查看链接: