Flex

Flex：Flexible Box 江湖人称“弹性布局”，对于网页布局，Flex以其简便、完整、响应式获得所有浏览器的信赖。

一、基本概念

1.任意一个容器都可以指定为Flex布局：display: flex;

2.行内元素：display: inline-flex;

3.Webkit内核的浏览器： display: -webkit-flex; /* Safari */   display: flex;

4.设置为该布局后，子元素的float,clear和vertical-align属性将失效

 

上图就是一个大概的描述

二、容器属性

一共有6个属性可以设置在容器上：

1）flex-direction

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

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

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

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

2）flex-wrap

     .nowrap（默认值）不换行

     .wrap                      换行，第一行在上方

     .wrap-reverse         换行，第一行在下方

3）flex-flow   

     .row nowrap（默认值）

4）justify-content   定义了项目在主轴上的对齐方式

     .flex-start（默认值）左对齐

     .flex-end      右对齐

     .center       居中

     .space-between       两端对齐，项目之间的间隔都相等

     .space-around       每个项目两侧的间隔相等

5）align-items   定义项目在交叉轴上如何对齐

     .flex-start                 交叉轴的起点对齐

     .flex-end                  交叉轴的终点对齐

     .center                     交叉轴的终点对齐

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

     .stretch                     如果项目未设置高度或者设置为auto,将占满容器的高度

6）align-content定义了多根轴线的对齐方式，若只有一根，则该属性不起作用

     .flex-start                 与交叉轴的起点对齐

     .flex-end                  与交叉轴的终点对齐

     .center                     与交叉轴的中点对齐

     .space-between      与交叉轴两端对齐，轴线之间的间隔平均分布

     .space-around         每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍

     .stretch                    轴线占满整个交叉轴

三、项目的属性（容器中的个体）

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

flex-grow：定义项目的放大比例，默认为0

flex-shrink：定义项目的缩小比例，默认值为1

flex :flex-grow, flex-shrink 和 flex-basis的简写，默认值0 1 auto,后两个属性可选

align-self:允许单个项目与其他项目不一样的对齐方式

       .auto

       .flex-start

       .flex-end

       .center

       .baseline

       .stretch