HTML5移動開發之Flexbox布局講解與提示

標籤：HTML5移動開發

現在來詳細介紹一下Flexbox布局文法跟使用.大家可能非常關心以下幾個問題:

1 .什麼是Flexbox布局?

2. Flexbox布局主要用於什麼情境?

3. Flexbox布局它的文法是什麼?

4. 如何實際使用Flexbox布局?

5. Flexbox布局它的缺陷是什麼?

下面就這五個問題給大家分析分析.希望給那些想嘗試用Flexbox的行內人有所協助. 在恰當的地方能夠使用恰當的布局方法,如果有說的不到位,希望大家指正,一起進步。

1 .什麼是Flexbox布局?

1.1 W3C解釋

Flexbox Layout(Flexible Box)模組，W3C官方稱為CSS彈性盒子布局，是在CSS3中定義的一種新的配置模式.

1.2 具體解釋

Flexbox Layout(Flexible Box)模組，W3C官方稱為CSS彈性盒子布局，是在CSS3中定義的一種新的配置模式。

Flexbox可以控制在容器內的子項目的對齊、相片順序以及排序次序，即使其子項目的尺寸是未知或者動態情況下。

彈性容器的主要特點就是能夠調整其子項目的寬度或者高度以使其能在不同解析度的螢幕下能用最好的方式去填充可用空間。

1.3 核心思想

具有flex屬性的容器和容器內的項目都具有彈性計算的能力，以至於符合預定的規則.

一個Flex彈性盒子能讓子項目填充可用空間或者為了阻止子項目超出地區而進行收縮。

2. Flexbox布局主要用於什麼情境?

1.大部分用於移動網頁製作上

2.react Native混合開發布局也是基於Flexbox布局

3. Angular等架構布局也採用Flexbox布局

2.1具體表現

1 在不設定元素的具體寬度的情形下將元素排成橫排，並在一排的空間不夠的時候折行。

2 快速的將元素排成豎排。

3 將元素沿著父容器的左邊、右邊或中間或者兩端(之前只能使用text-align:justify，還需要為低版本瀏覽器做很多相容)排齊。

4 改變元素顯示的順序而不改變HTML代碼。

5 將每個元素佔有的空間設定為父元素寬度/高度的一個比例，卻不用擔心在父元素的尺寸設定為百分比值的時候或是視窗的尺寸變化的時候布局會壞掉。

6 實現元素的水平，垂直置中。

有這麼效果,我們就來看看,到底每個效果如何用Flexbox布局來實現.

3. Flexbox布局它的文法是什麼?

3.1 參考了別人總結的,首先看一下Flexbox基本概念

採用Flex布局的元素，稱為Flex容器(flex container)，簡稱”容器”。它的所有子項目自動成為容器成員，稱為Flex項目(flex item)，簡稱”項目”。

容器預設存在兩根軸：

1. 水平的主軸(main axis)和垂直的交叉軸(cross axis)。

2. 主軸的開始位置(與邊框的交叉點)叫做main start. 結束位置叫做main end;

3. 交叉軸的開始位置叫做cross start，結束位置叫做cross end。

4. 項目預設沿主軸排列。單個項目佔據的主軸空間叫做main size，佔據的交叉軸空間叫做cross size。

3.2 具體布局

任何元素都可以指定為Flex布局,下面我們來具體看看怎麼去寫.

書寫幾個標籤

設定樣式

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

3.2 容器屬性

下面我們來看看別人總結的關於容器的屬性,現在拿過來分享給大家.

?1. flex-direction

含義:flex-direction屬性決定主軸的方向（即項目的排列方向） 
文法:flex-direction: row | row-reverse | column | column-reverse; 

解釋: 

row（預設值）：主軸為水平方向，起點在左端。 

row-reverse：主軸為水平方向，起點在右端。 

column：主軸為垂直方向，起點在上沿。 

column-reverse：主軸為垂直方向，起點在下沿。

實現:

     

?2. flex-wrap含義:

預設情況下，項目都排在一條線（又稱”軸線”）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行。

文法:

含義

1. nowrap（預設）：不換行。

2. wrap：換行，第一行在上方。

3. wrap-reverse：換行，第一行在下方

實現:標籤

?1. nowrap（預設）：不換行。

樣式設定

 效果

?2. wrap：換行，第一行在上方。

樣式設定

   效果

?3. wrap-reverse：換行，第一行在下方

樣式設定

   

效果

?4. flex-flow

含義:

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

文法

flex-flow: || ;

具體實現

效果

?5. justify-content含義:

justify-content屬性定義了項目在主軸上的對齊。

文法

參數解釋

1. flex-start（預設值）：靠左對齊

2. flex-end：靠右對齊

3. center： 置中

4. space-between：左右對齊，項目之間的間隔都相等。

5. space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。

1. flex-start（預設值）：靠左對齊具體樣式

     

效果展示

2. flex-end：靠右對齊

具體樣式

   效果展示

3. center： 置中具體樣式

效果展示

?6. space-between：左右對齊，項目之間的間隔都相等。

具體樣式

效果展示

?7. space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。

具體樣式

效果展示

?8. align-items

含義

align-items屬性定義項目在交叉軸上如何對齊。

文法:

參數解釋

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

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

3. center：交叉軸的中點對齊。

4. baseline: 項目的第一行文字的基準對齊。

5. stretch（預設值）：如果項目未設定高度或設為auto，將佔滿整個容器的高度。

具體樣式

 效果展示

(注意:剩下的樣式大家自己去試一試)

9. align-content含義

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

文法

參數解釋

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

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

3. center：與交叉軸的中點對齊。

4. space-between：與交叉軸左右對齊，軸線之間的間隔平均分布。

5. space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大

(注意:剩下的樣式大家自己去試一試)

更多關於HTML5教程的知識，歡迎關注菜鳥線上哦。

HTML5移動開發之Flexbox布局講解與提示