Flex 布局语法

网页布局是 CSS 的一个重点

布局的传统解决方法，基于盒状模型，依赖 display 属性 + position 属性 + float 属性。对于那些特殊布局非常不方便，比如：垂直居中就不容易实现。

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

一、Flex 布局是什么？

Flex 是 Flexible Box 的缩写，称为 “弹性布局”，用来为盒状模型提供最大的灵活性。

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

.boss{
    display: flex;
}

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

.boss{
    display: inline-flex;
}

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

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

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

二、基本概念

使用 Flex 布局元素，称为 Flex 容器（flex container），简称 “容器”。

所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称 “项目”。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。

主轴的开始位置（与边框的交叉点）叫 main start，结束位置叫 main end；

交叉轴的开始位置叫 cross start，结束位置叫 cross end。

项目默认沿主轴排列，单个项目占据的主轴空间叫 main size，占据的交叉轴空间叫 cross size。

三、容器属性

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

        1、flex-direction        属性决定主轴的方向（即项目的排列方向）

        2、flex-wrap        决定排列是否换行

        3、flex-flow        是flex-direction和flex-wrap属性的复合属性

        4、justify-content        设置主轴上的子元素排列方式

        5、align-items        设置侧轴上的子元素排列方式（单行）

        6、align-content        设置侧轴上的子元素排列方式（多行）

四、项目属性

以下6个属性设置在项目上：

        1、order        定义项目的排列顺序。数值越小，排列越靠前，默认为0

        2、flex-grow        定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大

        3、flex-shrink        定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小

        4、flex-basis        定义了在分配多余空间之前，项目占据的主轴空间（main size）

        5、flex        是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto

        6、align-self        允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性

如有错误，请斧正！

感谢