1.认识flex
Flex的发展史
2009年W3C 提出概念,但是官方没有flex这个词
2011年浏览器厂商决定使用flexbox,来形容它的布局特点
2015年W3C正式将其修改为flexbox布局
2016年5月官方正式公布最新的稳定的flex布局规范标准,各大浏览器的支持越来越稳定
定义
Flex是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性
作用
它能够更加高效方便的控制元素的对齐、排列
可以自动计算布局内元素的尺寸,无论这个元素的尺寸是固定的还是动态的
控制元素在页面的布局方向
按照不同于DOM所指定排序方式对屏幕上的元素重新排序
应用场景
使用在现代浏览器中
有一定宽容度要求的设计中
相对
宽容度要求较高
绝对
宽容度要求较低,100%还原设计稿
Flex基本概念
采用Flex布局的元素,称为Flex容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称”项目”
水平主轴(main axis)
垂直交叉轴(cross axis)
项目默认沿主轴排列
Flex布局语法
块级元素 display : flex;
行内元素 display : inline-flex;
注意
添加前缀 -webkit- -moz- -