6.6、彈性盒子
6.6.1、彈性盒子簡介
1、特點
flex布局 簡單、快速、高效頁面布局
2、flex布局與傳統布局對比
傳統布局:
1、兼容性好
2、PC端頁面更多使用傳統布局
3、布局繁瑣
4、有局限性，不能在移動端有很好的布局
flex布局：
1、 IE11及更早版本的不支持或部分支持
2、 移動端兼容性要比PC端要好
3、 在盒模型中較為靈活
4、 操作方便，布局簡單，移動端使用廣泛
5、 css3新增布局方式，一種當頁面需要使用不同屏幕大小，不同的設備類型時，能夠確保元素擁有恰當的行為
3、彈性盒模型的內容包含：彈性容器、彈性子元素
4、引入彈性盒子的目的
用一種更加有效的方式對容器的子元素進行排列、對齊、分配空白空間，即使彈性子元素尺寸發生改變，彈性容器也能正常工作
5、原理
為父元素設置display:flex屬性，控制子元素的排列方式及位置
6.6.2、設置彈性盒子——display屬性,在父元素上設置
- display: flex; 將盒子設置為彈性容器
- display: inline-flex;
6.6.3、基本概念
-
flex容器、項目
-
默認在容器中有兩根軸線
默認主軸：水平方向，左側為主軸起點，右側為主軸終點
默認交叉軸：垂直方向，上方為交叉軸起點，下方交叉軸的終點
將容器設置為flex布局之后，子元素中的float|clear|vertical-align屬性都無效
6.6.4、容器屬性——在父元素上設置
- flex-direction屬性 設置主軸方向，子元素的排列方向
flex-direction: row;/*默認值，主軸方向為水平方向，起點在左側，排列次序與文檔順序一致 */
flex-direction: row-reverse;/* 主軸方向水平方向，排列次序與文檔順序相反 */
flex-direction: column;/* 主軸方向為垂直方向，起點在上方，排列次序與文檔順序一致 */
flex-direction: column-reverse;/* 主軸方向為垂直方向，排列次序與文檔順序相反 */
- justify-content屬性 彈性子元素在主軸方向的對齊方式
justify-content: flex-start;/* 默認值，子元素位於彈性容器的開頭 */
justify-content: flex-end;/* 子元素位於彈性容器的結尾 */
justify-content: center;/* 子元素位於彈性容器的中部 */
justify-content: space-around;/* 子元素的之前、之間、之后都有空白空間 */
justify-content: space-between;/* 子元素之間有空白空間 */
- align-items屬性 彈性子元素在交叉軸上的對齊方式
align-items: stretch;/* 默認值，如果彈性子元素沒有設置高度或高度為auto，將占滿整個父元素高度 */
align-items: flex-start;/* 子元素位於交叉軸起點 */
align-items: flex-end;/* 子元素位於交叉軸終點 */
align-items: center;/* 子元素位於交叉軸中點 */
align-items: baseline;/* 子元素在第一行文字的基線對齊 */
- flex-wrap屬性 彈性子元素在一根軸線上放不下時的換行方式
flex-wrap: wrap;/* 換行，第一行在上方顯示 */
flex-wrap: wrap-reverse;/* 換行，第一行在下方顯示 */
flex-wrap: nowrap;/* 默認值，不換行 */
- align-content屬性 多根軸線的對齊方式，如果只有一根軸線，屬性失效
align-content: stretch;/* 默認值，軸線占滿整個交叉軸 */
align-content: flex-start;/* 交叉軸起點對齊 */
align-content: flex-end;/* 交叉軸終點對齊 */
align-content: center;/* 交叉軸中點對齊 */
align-content: space-around;/* 軸線兩側都有空白空間 */
align-content: space-between;/* 軸線之間有空白空間 */
6.6.5、項目屬性——寫在子盒上
- order屬性 子元素的排列次序
屬性值沒有單位，是數值，默認數值為0，數值越小，排列越靠前
- flex-grow屬性 子元素的放大比例
屬性值沒有單位，是數值，默認為0，表示不放大
- flex-shrink屬性 子元素的縮小比例
屬性值沒有單位，是數值
默認值為1，表示當空間不足時，等比例縮小
屬性值為0，表示當空間不足時，不縮小
- align-self屬性 彈性容器中被選中子項的對齊方式
align-self: auto; 默認值，元素繼承了父元素的align-items屬性，如果父元素沒有屬性則屬性值為stretch
align-self: stretch; 占滿整個容器高度
align-self: flex-start; 交叉軸起點對齊
align-self: flex-end; 交叉軸終點對齊
align-self: center; 交叉軸中點對齊
align-self: baseline; 子元素的第一行文字基線對齊