弹性盒模型布局

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;