flex 布局

一、什么是 Flex 布局？

　　flex（Flexible Box）意为“弹性盒子”，用来为盒状模型提供最大的灵活性。

　　将一个容器指定为Flex布局： display：flex;

　　行元素也可使用flex 布局： display:inline-flex;

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

二、Flex布局基本概念

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

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

三、容器的常用属性

 　　1.flex-direction （用于弹性容器中）:决定主轴的方向，即项目的排列方向　　

flex-direction: row | row-reverse | column | column-reverse

　　　* row(默认)：主轴为水平方向，起点在左端  （从左到右排列 ）

　　　* row-reverse: 主轴为水平方向，起点在右端 （从右到左排列 ）

　　　* column:主轴为垂直方向，起点在上沿 （从上到下排列 ）

　　　* column-reverse: 主轴为垂直方向，起点在下沿 （从下到上排列）

　　2.flex-wrap （用于弹性容器中）：是否换行显示

flex-wrap: nowrap | wrap | wrap-reverse

　　　　* nowrap(默认)：不换行，项目排在一条直线上

　　　　* wrap：换行，第一行在上方

　　　　* wrap-reverse: 换行，第一行在下方

　　3.justify-content （用于弹性容器中）：项目在主轴上的对齐方式，即水平方向的对其方式

?

1	justify-content: flex-start | flex-end | center | space-between | space-around

 

　　　　　* flex-start(默认)：左对齐

　　　　　* flex-end: 右对齐

　　　　　* center: 居中

　　　　　* space-between: 两端对齐，元素之间的间距都相等

　　　　　* space-around: 每个元素两侧的间距相等。所以，项目之间的间隔比项目与边框的间距大一倍

　　

 

 

　　4. align-items （用于弹性容器中）：定义项目在交叉轴上对齐方式，即垂直方向上的对齐方式

align-items: flex-start | flex-end | center | baseline | stretch

 

　　　　* flex-start: 交叉轴的起点对齐

　　　　* flex-end: 交叉轴的终点对齐

　　　　* center: 交叉轴的终点对齐

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

　　　　* stretch(默认)：如果项目未设置高度或设置为auto,将占满整个容器的高度

　　

 

　　5. align-self (用于弹性项目)：子元素在交叉轴方向的对齐方式，可覆盖align-items属性。

align-self: auto | flex-start | flex-end | center | baseline | stretch;

　　　　* auto(默认)： 表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

　　　　* flex-start: 交叉轴的起点对齐

　　　　* flex-end: 交叉轴的终点对齐

　　　　* center: 交叉轴的终点对齐

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

　　　　* stretch：如果项目未设置高度或设置为auto,将占满整个容器的高度