CSS布局——Flex布局

本文参考阮一峰大师的一篇文章：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

（图 待完善）

2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

一、Flex布局语法？

任何一个容器都可以指定为Flex布局。

.box{
display: flex;
}

行内元素也可以使用Flex布局。

.box{
display: inline-flex;
}

Webkit内核的浏览器，必须加上-webkit前缀。

.box{
display: -webkit-flex; /* Safari */
display: flex;
}

注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

二、基本概念

采用Flex布局的元素，称为Flex容器（flex container）。

它的所有子元素自动成为容器成员，称为Flex项目（flex

容器存在两根轴：水平主轴和垂直的交叉轴。

项目默认沿主轴排列。

单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

以下6个属性设置在容器上。

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

1.flex-direction属性

决定主轴的方向（即项目的排列方向）：

row（默认值）：主轴为水平方向，起点在左端。

row-reverse：主轴为水平方向，起点在右端。

column：主轴为垂直方向，起点在上沿。

column-reverse：主轴为垂直方向，起点在下沿。

3.2 flex-wrap属性

默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。3个值：nowrap（不换行）；wrap（换行 第一行在上方）；wrap-reverse（换行 第一行在下方）

justify-content属性

定义了项目在主轴上的对齐方式。

.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}

align-items属性

定义项目在交叉轴上如何对齐。

.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}

baseline: 项目的第一行文字的基线对齐。

stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

align-content属性

定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}