Flexbox 快速布局神器

flex是flexible box的縮寫，意為「彈性布局」，用來為盒狀模型提供最大的靈活性。

任何乙個容器都可以指定為flex布局。

flexbox通常能讓我們更好的操作它的子元素布局：

注意:設為flex布局以後，子元素的float、clear和vertical-align屬性將失效。

採用flex布局的元素，稱為flex容器，簡稱「容器」。它的所有子元素自動成為容器成員，稱為flex專案，簡稱「專案」。

以下6個屬性設定在容器上。

3.1 flex-direction屬性

flex-direction屬性決定主軸的方向

上圖是分別對flex-direction設定以上四個屬性值得效果。

3.2 flex-wrap屬性

.box

（1）nowrap(預設) :不換行

（2）wrap:換行，第一行在上方

（3）wrap-reverse:換行，第一行在下方

3.3 flex-flow

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap。

.box

justify-content屬性定義了專案在主軸上的對齊方式。

.box

align-item屬性定義專案在交叉軸上如何對齊。

.box

align-content屬性定義了多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用。

.box

4.1 order屬性

order屬性定義專案的排列順序。數值越小，排列越靠前，預設為0。

item

flex-grow屬性定義專案的放大比例，預設為0.

如上圖所示，我們把四個div的flex-grow屬性分別設為1,2,3,4，那麼他們等於把整個寬度分為10份，分別佔1/10、2/10、3/10、4/10。

4.3 flex-shrink屬性

flex-shrink定義了專案的縮小比例，預設為1，即如果空間不足，該專案將縮小。

由上圖可知，當空間不足時，flex-shrink屬性值大的縮小。

4.4 flex-basis屬性

flex-basis屬性定義了在分配多餘空間之前，專案佔據的主軸空間。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為auto，即專案的本來大小。

item

flex屬性是flex-grow,flex-shrink和flex-basis的簡寫，預設值為0 1 auto。

該屬性有兩個快捷值：auto(1 1 auto)和none(0 0 auto)。

4.6 align-self屬性

align-self屬性允許單個專案有與其他專案不一樣的對齊方式，可覆蓋align-items屬性。預設值為auto,表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。

item

布局神器 Flexbox

最近的工作內容大多是移動端網頁的開發，百分比布局，media queries,bootstrap等常規的響應式 自適應的開發技術皆一一試過，但覺以上都不夠靈活，所以，一直再嘗試尋求更加靈活的精確的移動端網頁設計技術。尋求的過程中知道了兩個讓我眼前一亮的解決方案 乙個是flexbox 另外乙個是rem...

CSS3布局神器 Flexbox

display flex是css3的新特性，是乙個強大的布局神器。在傳統的布局中，通常使用浮動float position，雖然能很好進行布局，但自從接觸flex後，對前端的布局來說簡直就是一種解放。上圖為flex在各瀏覽器和裝置上的相容性問題，可見除了ie瀏覽器外基本都支援了這一特性。不過即使這樣...

快速理解Flexbox布局

今天，本文會以盡量精簡的文本來介紹flexbox，示例會比以往少很多，因為要全面講述，估計十篇文章都講不完 flexbox，又叫彈性盒子布局。簡單來說，它是一種css快速布局方式，相比於傳統文件流布局方式，具有簡潔 高效和響應式等優點。1 超簡潔語法 就說元素水平垂直居中布局這個經典難題吧！這個問題...