【repost】CSS3彈性布局

標籤：對象   負數   cat   app   拓展   彈性布局   sha   沒有   round   

本文導讀：在CSS 3中，CSS Flexible Box模組為一個非常重要的模組，該模組用於以非常靈活的方式實現頁面配置處理。使用CSS Flexible Box模組中定義的彈性盒布局技術，可以根據螢幕尺寸或瀏覽器視窗尺寸自動調整頁面中各局部地區的顯示方式，即實現非常靈活的布局處理。

彈性布局（flexible box）模組旨在提供一個更加有效方式來布置，對齊和分布在容器之間的各項內容，即使它們的大小是未知或者動態變化的。

彈性布局的主要思想是讓容器有能力來改變項目的寬度和高度，以填滿可用空間的能力。

最重要的是彈性盒子布局與方向無關，相對於常規的布局，很顯然，這些工作以及網頁設計缺乏靈活性，無法支援大型和複雜的應用程式（特別當它涉及到改變方向，縮放、展開和收縮等）。

 

一、彈性盒布局中的術語

 

1).彈性容器:彈性容器也就是所有彈性元素的父容器。

2).彈性子項目:彈性容器的所有子項目都是彈性子項目。

3).軸:彈性盒布局中分主軸和側軸。主軸是布局布局的方向,側軸垂直於主軸。

4).方向: 彈性容器的主軸開始、主軸結束和側軸開始、側軸結束 邊緣代表了彈性子項目排列的起始和結束位置。同時可以改變屬性值來改變顯示位置。

 

二、彈性盒布局中的屬性

 

1、display: flex | inline-flex; (適用於父類容器元素上)

 

定義一個flex容器，內聯或者根據指定的值，來作用於下面的子類容器

 

(1)、box：將對象作為Auto Scaling盒顯示。（伸縮盒最老版本）

(2)、inline-box：將對象作為內聯塊級Auto Scaling盒顯示。（伸縮盒最老版本）

(3)、flexbox：將對象作為Auto Scaling盒顯示。（伸縮盒過渡版本）

(4)、inline-flexbox：將對象作為內聯塊級Auto Scaling盒顯示。（伸縮盒過渡版本）

(5)、flex：將對象作為Auto Scaling盒顯示。（伸縮盒最新版本）

(6)、inline-flex：將對象作為內聯塊級Auto Scaling盒顯示。（伸縮盒最新版本）

 

2、flex-grow (適用於彈性盒模型容器子項目)

設定或檢索彈性盒的擴充比率。（根據彈性盒子項目所設定的擴充因子作為比率來分配剩餘空間。）

定義

flex-grow: <number>

值說明

<number>：用數值來定義擴充比率。不允許負值

flex-grow的預設值為0，如果沒有顯示定義該屬性，是不會擁有分配剩餘空間權利的。本例中b,c兩項都顯式的定義了flex-grow，可以看到總共將剩餘空間分成了4份，其中b佔1份，c佔3分，即1:3

 

3、flex-shrink (適用於彈性盒模型容器子項目)

設定或檢索彈性盒的收縮比率（根據彈性盒子項目所設定的收縮因子作為比率來收縮空間。）

定義

flex-shrink: <number>

說明

flex-shrink的預設值為1，如果沒有顯示定義該屬性，將會自動按照預設值1在所有因子相加之後計算比率來進行空間收縮。

 

4、flex-basis(適用於彈性盒模型容器子項目)

設定或檢索彈性盒伸縮基準值。

定義

flex-basis: <length> | auto | <percentage>

值的說明

auto：無特定寬度值，取決於其它屬性值

<length>：用長度值來定義寬度。不允許負值

<percentage>：用百分比來定義寬度。不允許負值

 

5、flex (適用於彈性盒模型子項目)

複合屬性。設定或檢索伸縮盒對象的子項目如何分配空間。

如果縮寫flex:1, 則其計算值為：1 1 0

定義

flex：none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]

值的說明

none：none關鍵字的計算值為: 0 0 auto

[ flex-grow ]：定義彈性盒子項目的擴充比率。

[ flex-shrink ]：定義彈性盒子項目的收縮比率。

[ flex-basis ]：定義彈性盒子項目的預設基準值。

 

6、flex-direction (適用於父類容器的元素上)

設定或檢索伸縮盒對象的子項目在父容器中的位置。

定義

flex-direction: row | row-reverse | column | column-reverse

值說明

row：橫向從左至右排列（靠左對齊），預設的相片順序。

row-reverse：反轉橫向排列（靠右對齊，從後往前排，最後一項排在最前面。

column：縱向排列。

row-reverse：反轉縱向排列，從後往前排，最後一項排在最上面。

備忘

flex生效需定義其父元素display為flex

 

7、flex-wrap (適用於父類容器上)

設定或檢索伸縮盒對象的子項目超出父容器時是否換行。

定義

flex-wrap: nowrap | wrap | wrap-reverse

值說明

nowrap：當子項目溢出父容器時不換行。

wrap：當子項目溢出父容器時自動換行。

wrap-reverse：反轉 wrap 排列。

 

8、flex-flow (適用於父類容器上)

複合屬性。設定或檢索伸縮盒對象的子項目相片順序。

定義

flex-flow: <‘flex-direction’> || <‘flex-wrap’>

值說明

[ flex-direction ]：定義彈性盒子項目的排列方向。

[ flex-wrap ]：定義彈性盒子項目溢出父容器時是否換行。

 

9、align-content (適用於父類容器上)

設定或檢索彈性盒堆疊伸縮行的對齊。

定義

align-content: flex-start | flex-end | center | space-between | space-around | stretch

值說明

(1)、flex-start：各行向彈性盒容器的起始位置堆疊。彈性盒容器中第一行的側軸起始邊界緊靠住該彈性盒容器的側軸起始邊界，之後的每一行都緊靠住前面一行。

(2)、flex-end：各行向彈性盒容器的結束位置堆疊。彈性盒容器中最後一行的側軸起結束界緊靠住該彈性盒容器的側軸結束邊界，之後的每一行都緊靠住前面一行。

(3)、center：各行向彈性盒容器的中間位置堆疊。各行兩兩緊靠住同時在彈性盒容器中置中對齊，保持彈性盒容器的側軸起始內容邊界和第一行之間的距離與該容器的側軸結束內容邊界與第最後一行之間的距離相等。（如果剩下的空間是負數，則各行會向兩個方向溢出的相等距離。）

(4)、space-between：各行在彈性盒容器中平均分布。如果剩餘的空間是負數或彈性盒容器中只有一行，該值等效於‘flex-start‘。在其它情況下，第一行的側軸起始邊界緊靠住彈性盒容器的側軸起始內容邊界，最後一行的側軸結束邊界緊靠住彈性盒容器的側軸結束內容邊界，剩餘的行則按一定方式在彈性盒視窗中排列，以保持兩兩之間的空間相等。

(5)、space-around：各行在彈性盒容器中平均分布，兩端保留子項目與子項目之間間距大小的一半。如果剩餘的空間是負數或彈性盒容器中只有一行，該值等效於‘center‘。在其它情況下，各行會按一定方式在彈性盒容器中排列，以保持兩兩之間的空間相等，同時第一行前面及最後一行後面的空間是其他空間的一半。

(6)、stretch：各行將會伸展以佔用剩餘的空間。如果剩餘的空間是負數，該值等效於‘flex-start‘。在其它情況下，剩餘空間被所有行平分，以擴大它們的側軸尺寸。

 

10、align-items (適用於父類容器上)

設定或檢索彈性盒子項目在側軸（縱軸）方向上的對齊。

定義

align-items: flex-start | flex-end | center | baseline | stretch

值說明

(1)、flex-start：彈性盒子項目的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。

(2)、flex-end：彈性盒子項目的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。

(3)、center：彈性盒子項目在該行的側軸（縱軸）上置中放置。（如果該行的尺寸小於彈性盒子項目的尺寸，則會向兩個方向溢出相同的長度）。

(4)、baseline：如彈性盒子項目的行內軸與側軸為同一條，則該值與‘flex-start‘等效。其它情況下，該值將參與基準對齊。

(5)、stretch：如果指定側軸大小的屬性值為‘auto‘，則其值會使項目的邊距盒的尺寸儘可能接近所在行的尺寸，但同時會遵照‘min/max-width/height‘屬性的限制。

 

11、align-self (適用於彈性盒模型子項目)

設定或檢索彈性盒子項目自身在側軸（縱軸）方向上的對齊。

定義

align-self: auto | flex-start | flex-end | center | baseline | stretch

值說明

(1)、auto：如果‘align-self‘的值為‘auto‘，則其計算值為元素的父元素的‘align-items‘值，如果其沒有父元素，則計算值為‘stretch‘。

(2)、flex-start：彈性盒子項目的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。

(3)、flex-end：彈性盒子項目的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。

(4)、center：彈性盒子項目在該行的側軸（縱軸）上置中放置。（如果該行的尺寸小於彈性盒子項目的尺寸，則會向兩個方向溢出相同的長度）。

(5)、baseline：如彈性盒子項目的行內軸與側軸為同一條，則該值與‘flex-start‘等效。其它情況下，該值將參與基準對齊。

(6)、stretch：如果指定側軸大小的屬性值為‘auto‘，則其值會使項目的邊距盒的尺寸儘可能接近所在行的尺寸，但同時會遵照‘min/max-width/height‘屬性的限制。

 

12、justify-content (適用於父類容器上)

設定或檢索彈性盒子項目在主軸（橫軸）方向上的對齊。

當彈性盒裡一行上的所有子項目都不能伸縮或已經達到其最大值時，這一屬性可協助對多餘的空間進行分配。當元素溢出某行時，這一屬性同樣會在對齊上進行控制。

定義

justify-content: flex-start | flex-end | center | space-between | space-around

值說明

(1)、flex-start：彈性盒子項目將向行起始位置對齊。該行的第一個子項目的主起始位置的邊界將與該行的主起始位置的邊界對齊，同時所有後續的伸縮盒項目與其前一個項目對齊。

(2)、flex-end：彈性盒子項目將向行結束位置對齊。該行的第一個子項目的主結束位置的邊界將與該行的主結束位置的邊界對齊，同時所有後續的伸縮盒項目與其前一個項目對齊。

(3)、center：彈性盒子項目將向行中間位置對齊。該行的子項目將相互對齊並在行中置中對齊，同時第一個元素與行的主起始位置的邊距等同與最後一個元素與行的主結束位置的邊距（如果剩餘空間是負數，則保持兩端相等長度的溢出）。

(4)、space-between：彈性盒子項目會平均地分布在行裡。如果最左邊的剩餘空間是負數，或該行只有一個子項目，則該值等效於‘flex-start‘。在其它情況下，第一個元素的邊界與行的主起始位置的邊界對齊，同時最後一個元素的邊界與行的主結束位置的邊距對齊，而剩餘的伸縮盒項目則平均分布，並確保兩兩之間的空白空間相等。

(5)、space-around：彈性盒子項目會平均地分布在行裡，兩端保留子項目與子項目之間間距大小的一半。如果最左邊的剩餘空間是負數，或該行只有一個伸縮盒項目，則該值等效於‘center‘。在其它情況下，伸縮盒項目則平均分布，並確保兩兩之間的空白空間相等，同時第一個元素前的空間以及最後一個元素後的空間為其他空白空間的一半。

 

13、order (適用於彈性盒模型容器子項目)

定義

order: <integer>

值說明

<integer>：用整數值來定義排列順序，數值小的排在前面。可以為負值。

 

三、CSS3彈性布局執行個體

 

1、置中對齊

.flex-container /**//* We first create a flex layout context */  display: flex;  /**//* Then we define the flow direction and if we allow the items to wrap    * Remember this is the same as:   * flex-direction: row;   * flex-wrap: wrap;   */  flex-flow: row wrap;  }

執行個體說明

通過設定父類容器的css代碼控制子項目的相片順序（flex-direction:row）從左至右（預設）。子項目超出內容時是否換行。flex-wrap:wrap（採用換行的方式）。合起來就是flex-flow:row wrap。

設定子項目的彈性盒堆疊伸縮行的對齊為在盒子中平局分布 justify-content:space-around

 

2、自適應導航

 

{...}{  display: flex;  flex-flow: row wrap;  }{...}{  .navigation {      }}{...}{  .navigation {      }}

執行個體說明

(1)、設定子項目為從左至右（flex-direction:row），內容超出換行（flex-wrap:wrap）.

(2)、設定子項目的內容向靠右對齊（justify-content:flex-end）

(3)、當小於800px時，內容為置中，當小於500px時，內容縱向排列，從上到下。

 

3、3欄移動優先布局

 

.wrapper ...{  display: flex;  flex-flow: row wrap;}...{  flex: 1 100%;}/**//* Medium screens */@media all and (min-width: 600px) /**//* We tell both sidebars to share a row */  .aside ...{ flex: 1 auto; }}...{  ...{ flex: 2 0px; }  .aside-1 ...{ order: 1; }  .main    ...{ order: 2; }  .aside-2 ...{ order: 3; }  .footer  ...{ order: 4; }}

執行個體說明

(1)、設定子項目從左至右，超出換行（flex-flow:row wrap;）。

(2)、預設情況下所有子項目拓展比例為1（flex-grow:1），伸縮比例為100%（flex-basis:100%）。

(3)、大於800px時，.main的拓展比例為2.伸縮值為0（flex-basis:0px）,並且側欄aside-1排列在第一位，main在第二位，aside-2在第三位。

(4)、大於600時。.aside元素的拓展比例為1（flex-grow:1），伸縮比例為auto（flex-basis:auto）。

 

【repost】CSS3彈性布局