逆天的flexbox佈局

Flexbox是spankin新推出的一種CSS佈局模塊，擁有完美的瀏覽器兼容性！它能夠輕易作到垂直居中、從新排序、佈局的動態伸展與收縮。

Flexbox 兼容性參考

點擊查看 基本教程介紹（請用電腦上的現代瀏覽器查看演示）

• 提示：請將瀏覽器升級到最高版本，確保完整觀看工做演示。

建立flex容器

在建立任意flexbox佈局以前，先要建立一個flex容器：把display屬性設定爲flex。在Safari中，還須要添加-webkit前綴。

.flexcontainer {
   display: -webkit-flex;
   display: flex;
}

將 flex項目排成一行

Flex項目是flex容器的子類，它們沿着一條主軸和十字軸排列。主軸在默認狀況下是水平的，使項目橫向排列成一行。能夠切換主軸將flex的方向設置成豎排。

/*On the flex container*/
.flexcontainer {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: row;
   flex-direction: row;
}

http://www.gbtags.com/gb/debug/afeb2004-4619-493e-83ed-70163acb1f37.htm

將 flex項目排成一列

.flexcontainer {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: column;
   flex-direction: column;
}

http://www.gbtags.com/gb/debug/8b4805e0-97c6-4f55-8f73-1147512b61e8.htm

將flex項目移動到頂部

如何把flex項目移動到頂部取決於主軸的方向。若是主軸是垂直的，就豎直對齊（align-items）項目；若是主軸是水平的，則兩端對齊（justify-content）項目。

.flexcontainer {
   -webkit-flex-direction: column;
   flex-direction: column;
   -webkit-justify-content: flex-start;
   justify-content: flex-start;

.flexcontainer {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: row; 
   flex-direction: row;
   -webkit-align-items: flex-start;
   align-items: flex-start;
}

向左移動flex項目

左右移動flex項目一樣取決於主軸的方向。若是flex-direction被設置爲row，就justify-content；若是是column，則align-items。

.flexcontainer {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: row; 
   flex-direction: row;
   -webkit-justify-content: flex-start;
   justify-content: flex-start;
}

.flexcontainer {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: column; 
   flex-direction: column;
   -webkit-align-items: flex-start;
   align-items: flex-start;
}

向右移動flex項目

.flexcontainer {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: row;
   flex-direction: row;
   -webkit-justify-content: flex-end;
   justify-content: flex-end;
}

http://www.gbtags.com/gb/debug/349265e8-7c1e-48f8-ae9a-35d97b999664.htm

 

.flexcontainer {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: column;
   flex-direction: column;
   -webkit-align-items: flex-end;
   align-items: flex-end;
}

http://www.gbtags.com/gb/debug/d2881166-2e13-436e-bda2-b03b676721ba.htm

 

居中

在flex容器中設置垂直居中或水平居中很是簡單。只須要把 justify-content 和/或 align-items 設置到中間。一樣，取決於主軸的方向。

.flexcontainer {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: row /* works with row or column */
   flex-direction: row;
   -webkit-align-items: center;
   align-items: center;
   -webkit-justify-content: center;
   justify-content: center;
}

http://www.gbtags.com/gb/debug/16dd2af9-9ad9-4b94-9c05-b175436d2454.htm

http://www.gbtags.com/gb/debug/043c4b60-63cb-40e7-a4eb-76fcf13743f7.htm

將其中一個flex項目擴展爲其餘flex項目的X倍

還能夠單獨增大或減少某個flex項目的大小，須要針對該flex項目的flex屬性單獨設定爲擴大或縮小。

.bigitem {
   /* This will be twice as big as the small item. */
   -webkit-flex: 2 0 0; 
   flex: 2 0 0; 
}
.smallitem {
   -webkit-flex: 1 0 0;
   flex: 1 0 0;
}

多重行包裝多個flex項目

完成多行包裝僅有webkit瀏覽器和IE11可以支持，Firefox瀏覽器 尚不支持包裝。（悲劇！）

/* On the flex container */
.flexcontainer {
   display: -webkit-flex;
   display: flex;
   -webkit-align-items: center;
   align-items: center;
   -webkit-justify-content: center;
   justify-content: center;
   /* You can set flex-wrap and flex-direction individually */
   -webkit-flex-direction: row;
   flex-direction: row;
   -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
   /* Or do it all in one line with flex flow */
   -webkit-flex-flow: row wrap;
   flex-flow: row wrap;
   /* tweak the where items line up on the row */
   /* valid values are: flex-start, flex-end, space-between, space-around, stretch */
   -webkit-align-content: flex-end;
   align-content: flex-end;
}

多重列包裝多個flex項目

display: -webkit-flex;
   display: flex;
   -webkit-align-items: center;
   align-items: center;
   -webkit-justify-content: center;
   justify-content: center;
   -webkit-flex-flow: column wrap;
   flex-flow: column wrap;
   -webkit-align-content: stretch;
   align-content: stretch;
}

 刪除多行或多列flex項目之間的間隙

 align-content 屬性支持對包裝的flex項目的行與列之間的空間進行分配，能夠選擇的內容包括： flex-start、 flex-end、space-between、space-around 以及stretch。僅僅刪除多列flex項目之間間隙的話，將 align-content 設置爲center。

.flexcontainer {
   display: -webkit-flex;
   display: flex;
   -webkit-align-items: center;
   align-items: center;
   -webkit-justify-content: center;
   justify-content: center;
   -webkit-flex-flow: column wrap;
   flex-flow: column wrap;
   -webkit-align-content: center;
   align-content: center;

}

將某個flex項目釘在flex容器邊緣

 利用align-self能夠單獨控制某個元素的align-items值，使用margins向左（或者向右、向上、向下）移動某個單獨的元素。例如，在一整列布局中，設置margin-right爲auto，能夠把單獨的一個flex項目移動到最容器左邊。

/* On the flex item to pin */
.left {
   -webkit-align-self: flex-start;
   align-self: flex-start;
}

.right {
   margin-left: auto;
}

擴展閱讀，有關Flexbox佈局的其餘內容：

1. 下一代的Flexbox佈局框架：ptb/flexgrid
2. 一個在線幫助你調試Flexbox佈局的工具網站 - flexyboxes
3. 跨瀏覽器的Flexfox佈局實現