Flex(弹性布局)实现五大常用布局

css布局在前端开发工作中是必不可少的，在这里我将利用Flex实现五大常用布局，首先来熟悉一下flex。

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 item），简称”项目”。
• 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
• 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

三、容器的属性

有六个属性：

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

3.1 flex-direction

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

.box {
  flex-direction: row(默认) | row-reverse | column | column-reverse;
}
/*
row(默认)：主轴为水平方向，起点在左端。
row-reverse: 主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴在垂直方向，起点在下沿。
*/

3.2 flex-wrap

默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

.box{
    flex-wrap: nowrap(默认) | wrap | wrap-reverse;
}
/*
nowrap（默认）：不换行；
wrap：换行，第一行在上方
wrap-reverse：换行，第一行在下方
*/

3.3flex-flow（排列）

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

.box {
  flex-flow: <flex-direction> <flex-wrap>;
}