CSS-flex弹性布局

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- -