聊聊flexbox

twohappy 發(fā)布于2019-08-29 13:52 / 498人閱讀

摘要：和一步聊聊布局神器視頻講解有償?shù)呐侗疚纳婕皟?nèi)容如下的基本概念容器屬性學(xué)習(xí)項(xiàng)目屬性學(xué)習(xí)實(shí)戰(zhàn)演練。布局主要是讓容器中的子項(xiàng)目可以根據(jù)配置改變自身的寬高及順序，以最佳的方式填充容器，達(dá)到彈性的目的。下一小結(jié)，我們將共同學(xué)習(xí)項(xiàng)目相關(guān)屬性。

和一步聊聊布局神器flexbox 視頻講解 有償?shù)呐?

本文涉及內(nèi)容如下： flexbox的基本概念、容器屬性學(xué)習(xí)、項(xiàng)目屬性學(xué)習(xí)、實(shí)戰(zhàn)演練。 flexbox 堪稱布局神器，但屬性實(shí)在太多讓人無從下手，因此將自己所學(xué)的知識(shí)做個(gè)總結(jié)。

基本概念

flexbox是Flexible Box的縮寫，譯為彈性布局。flex 布局主要是讓容器中的子項(xiàng)目可以根據(jù)配置改變自身的寬高及順序，以最佳的方式填充容器，達(dá)到彈性的目的。容器有橫軸和縱軸來劃分容器，橫軸默認(rèn)為水平方向縱軸為垂直方向。

容器屬性

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

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

flex-direction

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

flex-wrap

該屬性用來控制，當(dāng)容器的主軸方向放不下所有項(xiàng)目時(shí)該如何處理。wrap | wrap-reverse | no-wrap, no-wrap 為默認(rèn)值。
code demo preview

flex-flow

flex-flow 是 flex-direction 和 flex-wrap 兩個(gè)屬性的簡寫，你要是記不住也不必強(qiáng)求。默認(rèn)值為row nowrap。

justify-content

justify-content定義子項(xiàng)目在主軸上的對(duì)齊方式。可以聯(lián)想下 text-align。flex-start | flex-end | center | space-between | space-around
需要注意的是：space-around的兩邊的邊距要比中間的邊距要小一些。
code demo preview

align-items

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

align-content

align-content屬性定義了多根軸線的對(duì)齊方式。如果項(xiàng)目只有一根軸線，該屬性不起作用。

以上就是flex 布局所涉及的所以容器屬性。下一小結(jié)，我們將共同學(xué)習(xí)項(xiàng)目相關(guān)屬性。

項(xiàng)目屬性

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

order

flex-grow

flex-shrink

flex-basis

flex

align-self

order

order 用來控制 flex 項(xiàng)目自身的擺放順序，默認(rèn)值為0，可以為負(fù)數(shù)，值越小項(xiàng)目越靠前擺放。
code demo preview

flex-grow

flex-grow控制項(xiàng)目的放大比例，默認(rèn)為0，不放大。值得注意的是放大的比例是相對(duì)于剩余的空間而言，而不是項(xiàng)目自己的大小。
code demo preview

flex-shrink

flex-shrink 與 flex-grow 類似，主要用來控制項(xiàng)目的縮小比例，默認(rèn)值為1，同比縮小。
code demo preview
flex-grow 和 flex-shrink 都是按照剩余空間進(jìn)行放大縮小的，而不是自身。大家記住瘦死的駱駝比馬大。

flex-basis

flex-basis 很好理解，若橫軸是主軸，flex-basis 可以當(dāng)做 width 來使用；若縱軸是主軸，flex-basis 可以當(dāng)做 height 來使用。個(gè)人感覺 flex-basis width 和 height 更靈活。

flex

flex 屬性是 flex-grow flex-shrink flex-basis 三個(gè)屬性的縮寫。同樣的原則，為了不增加大家的學(xué)習(xí)難度，不會(huì)不必強(qiáng)求。今天只向大家解釋一下 flex: 1;當(dāng) flex的值為整數(shù)是它代表 flex-grow: 數(shù)值； flex-shrink采用默認(rèn)值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

以上項(xiàng)目的屬性和練習(xí)也完成了，接下來使用 flex 布局實(shí)現(xiàn)我們?nèi)粘９ぷ髦谐Ｒ姷娜齻€(gè)需求。

實(shí)戰(zhàn)

實(shí)現(xiàn)等寬布局，即使項(xiàng)目被刪除和添加也不需要更改 css 的代碼，常用來實(shí)現(xiàn)導(dǎo)航code demo preview
垂直水平居中，該需求是特別常見的使用 flex 特別容易。code demo preview
等高布局，當(dāng)左右兩個(gè)框的高度不定時(shí)，我們可以考慮使用 flex 實(shí)現(xiàn)。code demo preview

FLEXBOX FROGGY游戲檢驗(yàn)一下自己對(duì) flexbox 的理解
歡迎大家指正批評(píng)、或留言。QQ群：538631558

【開發(fā)環(huán)境推薦】Cloud Studio 是基于瀏覽器的集成式開發(fā)環(huán)境，支持絕大部分編程語言，包括 HTML5、PHP、Python、Java、Ruby、C/C++、.NET 小程序等等，無需下載安裝程序，一鍵切換開發(fā)環(huán)境。 Cloud Studio提供了完整的 Linux 環(huán)境，并且支持自定義域名指向，動(dòng)態(tài)計(jì)算資源調(diào)整，可以完成各種應(yīng)用的開發(fā)編譯與部署。