聊聊flexbox

和一步聊聊佈局神器flexbox 視頻講解 有償的哦

本文涉及內容以下： flexbox的基本概念、容器屬性學習、項目屬性學習、實戰演練。 flexbox 堪稱佈局神器，但屬性實在太多讓人無從下手，所以將本身所學的知識作個總結。

基本概念

flexbox是Flexible Box的縮寫，譯爲彈性佈局。flex 佈局主要是讓容器中的子項目能夠根據配置改變自身的寬高及順序，以最佳的方式填充容器，達到彈性的目的。容器有橫軸和縱軸來劃分容器，橫軸默認爲水平方向縱軸爲垂直方向。

容器屬性

容器屬性用來控制佈局的大方向。

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

flex-direction

flex-direction屬性決定主軸方向（即項目的排列方向）。 row | row-reverse | column | column-reverse
code demo preview

flex-wrap

該屬性用來控制，當容器的主軸方向放不下全部項目時該如何處理。wrap | wrap-reverse | no-wrap, no-wrap 爲默認值。
code demo preview

flex-flow

flex-flow 是 flex-direction 和 flex-wrap 兩個屬性的簡寫，你要是記不住也沒必要強求。默認值爲row nowrap。

justify-content

justify-content定義子項目在主軸上的對齊方式。能夠聯想下 text-align。flex-start | flex-end | center | space-between | space-around
須要注意的是：space-around的兩邊的邊距要比中間的邊距要小一些。
code demo preview

align-items

justify-content定義子項目在縱軸上的對齊方式。 flex-start | flex-end | center | baseline | stretch
code demo preview

align-content

align-content屬性定義了多根軸線的對齊方式。若是項目只有一根軸線，該屬性不起做用。

也就是說只有當 wrap生效時，該屬性纔有存在的意義。flex-start | flex-end | center | space-between | space-around | stretch
code demo preview

以上就是flex 佈局所涉及的因此容器屬性。下一小結，咱們將共同窗習項目相關屬性。

項目屬性

項目屬性用來控制容器中的項目自身的位置和伸縮。

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

order

order 用來控制 flex 項目自身的擺放順序，默認值爲0，能夠爲負數，值越小項目越靠前擺放。
code demo preview

flex-grow

flex-grow控制項目的放大比例，默認爲0，不放大。值得注意的是放大的比例是相對於剩餘的空間而言，而不是項目本身的大小。
code demo preview

flex-shrink

flex-shrink 與 flex-grow 相似，主要用來控制項目的縮小比例，默認值爲1，同比縮小。
code demo preview
flex-grow 和 flex-shrink 都是按照剩餘空間進行放大縮小的，而不是自身。你們記住瘦死的駱駝比馬大。

flex-basis

flex-basis 很好理解，若橫軸是主軸，flex-basis 能夠當作 width 來使用；若縱軸是主軸，flex-basis 能夠當作 height 來使用。我的感受 flex-basis width 和 height 更靈活。

flex

flex 屬性是 flex-grow flex-shrink flex-basis 三個屬性的縮寫。一樣的原則，爲了避免增長你們的學習難度，不會沒必要強求。今天只向你們解釋一下 flex: 1;當 flex的值爲整數是它表明 flex-grow: 數值； flex-shrink採用默認值1；flex-basis:爲0%。

.item {flex: 1;}
.item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}

那麼你們思考一下flex: 2;等同於什麼？

.item {flex: 2;}
.item {
    flex-grow: 2;
    flex-shrink: 1;
    flex-basis: 0%;
}

align-self

align-self控制自身在側重的對齊方式，和容器屬性 align-items 相似，固然了，優先機確定是高於他的爸爸的。auto | flex-start | flex-end | center | baseline | stretch
code demo preview

以上項目的屬性和練習也完成了，接下來使用 flex 佈局實現咱們平常工做中常見的三個需求。

實戰

實現等寬佈局，即便項目被刪除和添加也不須要更改 css 的代碼，經常使用來實現導航code demo preview
垂直水平居中，該需求是特別常見的使用 flex 特別容易。code demo preview
等高佈局，當左右兩個框的高度不定時，咱們能夠考慮使用 flex 實現。code demo preview

FLEXBOX FROGGY遊戲檢驗一下本身對 flexbox 的理解
歡迎你們指正批評、或留言。QQ羣：538631558

【開發環境推薦】 Cloud Studio 是基於瀏覽器的集成式開發環境，支持絕大部分編程語言，包括 HTML五、PHP、Python、Java、Ruby、C/C++、.NET 小程序等等，無需下載安裝程序，一鍵切換開發環境。 Cloud Studio提供了完整的 Linux 環境，而且支持自定義域名指向，動態計算資源調整，能夠完成各類應用的開發編譯與部署。