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;
