Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局，所以Flex 布局将成为未来布局的首选方案。
对于Flex布局的一些具体语法实现，可参见阮一峰大神的Flex 布局教程：语法篇；网友 JailBreak 为Flex布局制作了 Demo，可以参考。
想了解Flex布局的具体实例可参见阮一峰大神的Flex 布局教程：实例篇；想直接查看Flex布局实例，你可以到直接到codepen查看Demo。
接下来讲一下此实例的具体实现：
1、首先将container块设置为一个Flex容器
示例代码
那么container下属的main、left和right这三个子元素自动成为容器成员，称为 Flex 项目（flex item），简称”项目”。
2、对这三个项目做初始设置，项目根据内容进行弹性布局：
示例代码
示例代码效果图
3、通过order属性设置排列顺序
可以看出三个项目的排序方式不一样了，main排在了第一个，要让main在中间，left在左边，可以通过Flex容器下的项目的属性“order”属性来设置：
示例代码
对于order属性：定义项目的排列顺序，越小越靠前，默认为0。
示例代码效果图
4、通过项目属性flex-grow设置main的放大比例，将空余的空间用main来填充，使三个项目不满一整行；默认为0，也就是对剩余空间不做处理。
示例代码效果图
5、通过项目属性flex-basis 设置left和right的固定宽度
示例代码
示例代码效果图
更多详细请参考：https://alistapart.com/article/holygrail
网友评论