圖文學習前端Flex佈局

哪吒人生信條：若是你所學的東西 處於喜歡 纔會有強大的動力支撐。

把你的前端拿捏得死死的，天天學習得爽爽的，關注這個不同的程序員，若是你所學的東西 處於喜歡 纔會有強大的動力支撐。

感謝不負每一份熱愛前端的程序員，不論前端技能有多奇葩，歡迎關注加我入羣vx:xiaoda0423

前言

本篇文章進行學習css中的一個重點應用，佈局樣式爲flex佈局，相信你學習瞭解過display屬性，position屬性，float屬性，但今天只學習新東西就是flex佈局。

flex佈局是什麼

flex是flexible box的縮寫，意思是彈性佈局，代碼樣式以下：

.box {
 display: flex;
}

Flexbox Layout模塊是提供一個更有效的方式來佈置，對齊和item之間在一個容器中分配的控件，即便它們的大小是未知的，或者是動態的，因此單詞命名flex(彈性工做制的)

flex佈局可使容器更改其item的寬度，高度，以便最好地填充可用空間，或者收縮它們來防止溢出。flexbox佈局使用比較合適應用程序地組件和小規模佈局上。

在webkit內核地瀏覽器中，要加上-webkit前綴哦，代碼格式以下：

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

當設置flex佈局以後，子元素（item）的float，clear，vertical-align屬性會失效。

學習前要先了解概念

flex container flex items

設置flex佈局的元素爲flex容器（flex container），簡稱爲容器。它的全部子元素都是容器的成員，flex項目（flex item），簡稱爲項目。那麼請查看以下圖，解析flex佈局背後的主要思想。

如圖能夠看出，main axis是從main-start到main-end，交叉軸cross axis從cross-start到cross-end。

容器默認有兩根軸的，水平的主軸main axis和垂直的交叉軸cross axis，從main-start到main-end叫（main start）主軸；從cross axis從cross-start到cross-end叫（cross axis）交叉軸

單個項目佔據的主軸空間叫main size，佔據的交叉軸空間叫cross size

container彈性容器：

.container {
 display: flex;
}

items彈性項目:

容器的屬性

1. flex-direction
2. flex-wrap
3. flex-flow
4. justify-content
5. align-items
6. align-content

flex-direction屬性決定的是主軸的方向，便是項目的排列方向

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

.flex-container {
  -webkit-flex-direction: row; /_ Safari _/
  flex-direction:         row;
}

.flex-container {
  -webkit-flex-direction: row-reverse; /_ Safari _/
  flex-direction:         row-reverse;
}

.flex-container {
  -webkit-flex-direction: column; /_ Safari _/
  flex-direction:         column;
}

.flex-container {
  -webkit-flex-direction: column-reverse; /_ Safari _/
  flex-direction:         column-reverse;
}

其使用flex-direction的box格式以下：

// 水平
.box {
    flex-direction: row; 
}

// 水平倒置
.box {
    flex-direction: row-reverse; 
}

// 垂直
.box {
    flex-direction: column ; 
}

// 垂直倒置
.box {
    flex-direction: column-reverse; 
}

.box {
    width: 400upx;
    height: 300upx;
    background-color: #007AFF;
    margin: 10upx;
}

.item {
    width: 80upx;
    height: 80upx;
    background-color: #1CBBB4;
    border: 1upx solid #FFFFFF;
}

row：flex容器的主軸與當前寫入模式的內聯軸具備相同的方向。主開始方向和主結束方向分別至關於當前寫入模式的開始方向和結束方向。

.box-row {
    display: flex;
    flex-direction: row;
}

row-reverse: 與'row'相同，只是主開始方向和主結束方向交換了。

.box-row-reverse {
    display: flex;
    flex-direction: row-reverse;
}

column: flex容器的主軸與當前寫入模式的塊軸方向相同。主開始方向和主結束方向分別至關於當前書寫模式的前/頭和後/腳方向。

.box-column {
    display: flex;
    flex-direction: column;
}

column-reverse: 與'column'相同，只是主開始方向和主結束方向交換了。

.box-column-reverse {
    display: flex;
    flex-direction: column-reverse;
}

flex-wrap屬性：根據伸縮容器中的可用空間，指定伸縮項是否換行以及它們換行到多行或多列的方向。

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

.flex-container {
  -webkit-flex-wrap: nowrap; /_ Safari _/
  flex-wrap:         nowrap;
}

.flex-container {
  -webkit-flex-wrap: wrap; /_ Safari _/
  flex-wrap:         wrap;
}

.flex-container {
  -webkit-flex-wrap: wrap-reverse; /_ Safari _/
  flex-wrap:         wrap-reverse;
}

flex-wrap: nowrap: 不換行。（全部彈性項目都將在一行上）

.box-flex-wrap-nowrap {
    display: flex;
    flex-wrap: nowrap;
}

flex-wrap: wrap: 換行，第一行在上方。（彈性項目將從上到下纏繞在多行上）

.box-flex-wrap-wrap {
    display: flex;
    flex-wrap: wrap;
}

wrap-reverse: 換行，第一行在下方。（彈性項目將從下到上纏繞在多行上）

.box-flex-wrap-wrap-reverse {
    display: flex;
    flex-wrap: wrap-reverse;
}

flex-flow屬性是 flex-direction屬性和 flex-wrap屬性的簡寫形式，默認值爲 row nowrap。

.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}

.container {
  flex-flow: column wrap;
}

.box-flex-flow-1 {
    display: flex;
    flex-flow: auto; // flex-flow: row nowrap;
}

.box-flex-flow-2 {
    display: flex;
    flex-flow: row wrap;
}

justify-content屬性:指定在解析了任意靈活長度和自動邊距後，伸縮項如何沿伸縮容器的主軸對齊。(定義了項目在主軸上的對齊方式)

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

flex-start

初始值。伸縮項目被打包在行首。第一個伸縮項的起始邊被放置在伸縮容器的開始處。下一個伸縮項的起始邊與第一個伸縮項的結束邊按佈局軸方向依次放置。全部沿佈局軸保留的空間都放置在佈局軸的末端。

.box-flex-justify-content-1 {
    display: flex;
    justify-content: flex-start;
}

如圖效果：

flex-end

彈性物品被打包到行尾。第一個伸縮項的結束邊緣被放置在伸縮容器的末端。下一個伸縮項目的結束邊緣與第一個伸縮項目的開始邊緣按佈局軸方向依次放置。沿佈局軸剩下的全部空間都放置在佈局軸的起點。

.box-flex-justify-content-2 {
    display: flex;
    justify-content: flex-end;
}

如圖效果：

center

彈性物品被打包在線的中間。flex項目在直線上放置沖洗彼此對齊線的中心,與等量的main-start邊緣之間的空白行和第一項之間的線,主要目的的邊緣線,最後一項。(若是剩餘的空閒空間是負的，伸縮項將在兩個方向上相等地溢出。)

.box-flex-justify-content-3 {
    display: flex;
    justify-content: center;
}

如圖效果：

space-between

彈性項目均勻地分佈在這條線上。若是剩餘的自由空間是負的，或者一行上只有一個flex項目，這個值與' flex-start '相同。不然,main-start保證的第一flex項目線的邊緣放置充裕的main-start邊緣線,最後一個flex項的主要目的利潤邊緣線放置充裕的主要目的邊緣線,和其他的flex項目的分佈之間的間距與任何兩個相鄰物品是同樣的。

.box-flex-justify-content-4 {
    display: flex;
    justify-content: space-between;
}

如圖效果：

space-around

彈性項目均勻地分佈在線中，在兩端有一半大小的空間。若是剩餘的自由空間是負的，或者一行上只有一個伸縮項，這個值與' center '相同。不然，行上的伸縮項的分佈使行上任意兩個相鄰伸縮項之間的間距相同，而且第一個/最後一個伸縮項與伸縮容器邊緣之間的間距爲伸縮項之間間距的一半。

.box-flex-justify-content-5 {
    display: flex;
    justify-content: space-around;
}

如圖效果：

space-evenly：分配項目，以使任意兩個項目之間的間距（以及到邊緣的間距）相等。

align-items屬性：指定伸縮容器中伸縮項的對齊值(垂直於由伸縮方向屬性定義的佈局軸)。

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

修改item樣式如圖:

.item1 {
    width: 100upx;
    height: 120upx;
}

.item2 {
    width: 100upx;
    height: 130upx;
}

.item3 {
    width: 100upx;
    height: 140upx;
}

flex-start：交叉軸的起點對齊。

.box-flex-align-items-1 {
    display: flex;
    align-items: flex-start;
}

flex-end：交叉軸的終點對齊。

.box-flex-align-items-2 {
    display: flex;
    align-items: flex-end;
}

center：交叉軸的中點對齊。

.box-flex-align-items-3 {
    display: flex;
    align-items: center;
}

baseline: 項目的第一行文字的基線對齊。

修改item，以第一行文字的基線對齊，想如圖效果，itme3-text頂部沒有剩餘空間，就被強迫這樣了。若是有空間，已第一個爲標準對齊，第一個item文本底線對齊。

.item1-text {
    padding: 5upx;
    width: 120upx;
    height: 120upx;
}

.item2-text {
    width: 120upx;
    height: 130upx;
}

.item3-text {
    padding: 15upx;
    width: 120upx;
    height: 140upx;
}

.box-flex-align-items-4 {
    display: flex;
    align-items: baseline;
}

stretch（默認值）：若是項目未設置高度或設爲 auto，將佔滿整個容器的高度。

修改item，沒有定義高度，若是有高度仍是按照原來的高度呈現。

.item-noheight {
    width: 100upx;
    border: 1upx solid #FFFFFF;
}

.box-flex-align-items-5 {
    display: flex;
    align-items: stretch;
}

align-content屬性：指定當與 flex-direction屬性定義的軸垂直的軸上有額外空間時， flex項目的行如何在 flex容器內對齊。

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

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

flex-start：交叉軸的起點對齊

flex-end：與交叉軸的終點對齊

center：與交叉軸的中點對齊

space-between：與交叉軸兩端對齊，軸線之間的間隔平均分佈

space-around：每根軸線兩側的間隔都相等，軸線之間的間隔比軸線與邊框的間隔大一倍

stretch：軸線佔滿整個交叉軸

項目的屬性

1. order
2. flex-grow
3. flex-shrink
4. flex-basis
5. flex
6. align-self

order屬性定義項目的排序時，數值越小，排列越靠前，默認爲0

.item {
  order: <integer>;
}

flex-grow屬性定義項目的放大比例，默認爲0，若是還有存在剩餘空間，也不會放大

若是全部項目的flex-grow屬性都爲1，那麼它們將等分剩餘的空間，若是一個項目的flex-grow屬性爲2，其餘項目都爲1，那麼前者佔據的剩餘空間將比其餘項目多一倍。

.item {
  flex-grow: <number>; /* default 0 */
}

flex-shrink屬性定義了項目的縮小的比例，默認爲1，若是空間不足，該項目將縮小

若是全部項目的flex-shrink屬性都爲1，當空間不足時，都將等比例縮小，若是一個項目的flex-shrink屬性都爲0，其餘項目都爲1，則空間不足時，前者不縮小，負值對該屬性無效。

.item {
  flex-shrink: <number>; /* default 1 */
}

flex-basis屬性：定義了在分配多餘空間以前，項目佔據的主軸空間main size，瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的默認值爲auto，便是項目的原本的大小。

.item {
  flex-basis: <length> | auto; /* default auto */
}

flex屬性是flex-grow，flex-shrink和flex-basis的簡寫，默認值爲 0 1 auto ，後兩個屬性可選。

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

該屬性有兩個快捷值：auto（1 1 auto）和none（0 0 auto）

align-self屬性：容許單個項目有與其餘項目不同的對齊方式，可覆蓋align-items屬性，默認值爲auto，表示繼承父元素的align-items屬性，若是沒有父元素，則等同於stretch。

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

點贊、收藏和評論

我是Jeskson(達達前端)，感謝各位人才的：點贊、收藏和評論，咱們下期見！(如本文內容有地方講解有誤，歡迎指出☞謝謝，一塊兒學習了)

咱們下期見！

文章持續更新，能夠微信搜一搜「 程序員哆啦A夢 」第一時間閱讀，回覆【資料】有我準備的一線大廠資料，本文 http://www.dadaqianduan.cn/#/ 已經收錄，歡迎Star。