Flexible(flex)布局入门到彻底理解

一.简介

一、概述

浮动在移动布局中不再重要，flex盒模型越来越重要。

flexbox经历过三个版本，主要区别是2009年到2012年之间的语法变化。

最新的语法和现在规范是同步的（例display:flex和“flex-{*}”属性）。

在这之间的语法是2011年出现的非官方语法，只能被IE识别（例display:flexbox;display: -ms-flexbox）。

最老的语法产生于2009年（例display: box;或者“box-{*}”属性）

- W3C 2009年第1次草案：[display:box;](https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/)

- W3C 2011年第2次草案：[display:flexbox | inline-flexbox;](https://www.w3.org/TR/2011/WD-css3-flexbox-20110322/)

- W3C 2012年第5次草案及以后的候选推荐标准：[display:flex | inline-flex;](https://www.w3.org/TR/2012/WD-css3-flexbox-20120612/)

二、布局模型

Flexible Box弹性布局

任意容器都可以指定成flex布局：

.box {
  display: flex;
}
<!-- 行内元素 -->
.box {
  display: inline-flex;
}

设为flex布局后，子元素的float、clear、vertical-align将失效

称采用Flex布局的元素为Flex容器（flex container），它的所有子元素自动成为容器成员，称为Flex项目(flex item)。

两根轴：

水平主轴 main axis

主轴与边框的左右交叉点 main start/main end

垂直交叉轴 cross axis

交叉轴与边框的上下交叉点 cross start/cross end

项目（flex item）默认沿主轴排列，单项目占据的主轴空间/交叉轴空间 main size/cross size