display 属性
开启弹性布局
// 块元素
display: flex;
// 行内元素
display: inline-flex;
伸缩容器的各属性
1. flex-direction 属性
指定主轴的方向
Paste_Image.png
// 水平方向 (默认)
flex-direction:row;
// 水平相反方向
fiex-direction:row-reverse;
// 垂直方向
fiex-direction:column;
// 垂直相反方向
fiex-direction:column-reverse;
2. flex-wrap 属性
主轴方向空间不足是否换行 如何换行
// 不换行 (默认)
flex-wrap:nowrap;
// 换行 从上到下
flex-wrap:wrap;
// 换行 从下到上
flex-wrap:wrap-reverse;
3. justify-content 属性
在主轴线的对齐方式
Paste_Image.png
//主轴方向的起始方向对齐（左对齐）
justify-content:flex-start; (默认)
//主轴方向的结束方向对齐（�右对齐）
justify-content:flex-end;
// 主轴方向的中间方向对齐（�居中对齐）
justify-content:center;
// 主轴平均分部（��两端对齐）
justify-content:space-between;
// 主轴平均分部两端留也中间一半的空间（��两端对齐留空间）
justify-content:space-around;
4. align-items 属性
在交叉轴上的对齐方式（垂直Y轴的对齐方式）
Paste_Image.png
// 交叉轴方向的起始方向对齐(上对齐)
align-items:flex-start;
// 交叉轴方向的结束方向对齐( 下对齐)
align-items:flex-end;
// 交叉轴方向的中间对齐( 居中对齐)
align-items:center;
// 以基准线对齐(不设有高度)
align-items:baseline;
// 拉伸对齐(不设有高度)
align-itmes:stretch;
5. align-content 属性
在换行情况下在交叉轴(Y轴)的对齐方式
bg2015071012.png
//交叉轴(Y轴)方向的起始方向对齐（左对齐）
align-content:flex-start;
//交叉轴(Y轴)方向的结束方向对齐（�右对齐）
align-content:flex-end;
//交叉轴(Y轴)方向的中间对齐（�居中对齐）
align-content:center;
// /交叉轴(Y轴)平均分部（��两端对齐）
align-content:space-between;
// /交叉轴(Y轴)平均分部两端留也中间一半的空间（��两端对齐留空间）
align-content:space-around;
// 交叉轴(Y轴)拉伸对齐(不设有高度)
align-content:stretch;
伸缩项目的各属性
1. order
定义项目的排序，值越小越靠前，默认是0；值为整数；
order:1;
Paste_Image.png
2.flex-grow
定义伸缩放大比例，默认为0，表示有剩余也不放大；
flex-grow:1;
Paste_Image.png
3. flex-shrink
定义伸缩收缩比例，默认为1
flex-shrink:1;
4. flex-basis
设置伸缩的基准值
flex-basis:100px | auto; //默认为:auto;
5. align-self
设置单独的伸缩项目在交叉轴(Y轴)的对齐方式，会覆盖伸缩容器对本身的对齐方式
// 左对齐 | 右对齐 | 居中对齐 | 两端对齐 | 两端对齐留空间 | 伸缩
�align-self:auto | flex-start | flex-end | center | space-between | space-around | stretch;
