CSS3 彈性盒布局模型和布局原理

2024-04-27 15:17:25

字體：大中小

來源：轉載

供稿：網友

在CSS 3中，CSS Flexible Box模塊為一個非常重要的模塊，該模塊用于以非常靈活的方式實現頁面布局處理。

雖然可以使用其他CSS樣式屬性來實現頁面布局處理，但是如果使用CSS Flexible Box模塊中定義的彈性盒布局技術，可以根據屏幕尺寸或瀏覽器窗口尺寸自動調整頁面中各局部區域的顯示方式，即實現非常靈活的布局處理。

引入彈性盒布局模型的目的是提供一種更加有效的方式來對一個容器中的條目進行排列、對齊和分配空白空間。即便容器中條目的尺寸未知或是動態變化的，彈性盒布局模型也能正常的工作。在該布局模型中，容器會根據布局的需要，調整其中包含的條目的尺寸和順序來最好地填充所有可用的空間。當容器的尺寸由于屏幕大小或窗口尺寸發生變化時，其中包含的條目也會被動態地調整。比如當容器尺寸變大時，其中包含的條目會被拉伸以占滿多余的空白空間；當容器尺寸變小時，條目會被縮小以防止超出容器的范圍。彈性盒布局是與方向無關的。在傳統的布局方式中，block 布局是把塊在垂直方向從上到下依次排列的；而 inline 布局則是在水平方向來排列。彈性盒布局并沒有這樣內在的方向限制，可以由開發人員自由操作。

在進行詳細解釋這個模型之前，我們先了解一下彈性盒模型的幾個屬性，稍微看一下就好，后面會解釋具體的用法。

1）box-orient：用來確定子元素的方向。是橫著排還是豎著走。

2）box-direction：用來確定子元素的排列順序，即是否反轉。

3）box-pack：用來確定子元素的左右對齊方式。

4）box-align：用來確定子元素的上下對齊方式。

5）box-flex：用來確定子元素如何分配其剩余元素。子元素的尺寸=盒子的尺寸*子元素的box-flex屬性值 / 所有子元素的box-flex屬性值的和。

5）box-lines：用來決定子元素是可以換行顯示。

6）box-flex-group：用來確定子元素的所屬組。

7）box-ordinal-group：用來確定子元素的顯示順序。

　接下來開始通過一個示例頁面開始學習彈性盒布局。該示例頁面中的body元素中的代碼如下所示。

<div id="main">    <div class="content">        <section>            <h1>section 1</h1>            <p>示例文字</p>        </section>        <section>            <h1>section 2</h1>            <p>示例文字</p>        </section>        <section>            <h1>section 3</h1>            <p>示例文字</p>        </section>        <section>            <h1>section 4</h1>            <p>示例文字</p>        </section>    </div>    <div class="content">        <section>            <h1>section 5</h1>            <p>示例文字</p>            <section>                <h1>section 6</h1>                <p>示例文字</p>            </section>            <section>                <h1>section 7</h1>                <p>示例文字</p>            </section>            <section>                <h1>section 8</h1>                <p>示例文字</p>            </section>    </div>    <div class="content">        <section>            <h1>section 9</h1>            <p>示例文字</p>        </section>        <section>            <h1>section 10</h1>            <p>示例文字</p>        </section>        <section>            <h1>section 11</h1>            <p>示例文字</p>        </section>        <section>            <h1>section 12</h1>            <p>示例文字</p>        </section>    </div></div>
      為了更清晰看清楚結構，具體的樣式代碼如下：
        #main {            border: 2px solid #382aff;            padding: 1em;        }        .content {            border: 2px solid #ff2834;            padding: 1em;        }        div {            border: 2px solid #73ff58;            padding: 1em;        }      頁面顯示結果如下：
1、使用彈性盒布局 dispaly:box
      接下來，對示例頁面使用彈性盒布局：
       彈性盒布局的指定方法為：對需要布局的元素的容器元素使用display: -moz-box;display: -webkit-box;display: box;樣式屬性，因為這個屬性需要兼容各種瀏覽器，所以需要寫前綴進行兼容性書寫。在CSS Flexible Box模塊中，該容器元素中的每一個元素均被稱為“Flex item”，將該容器元素稱為“Flex container”。
　　彈性盒布局方式與使用float等樣式屬性進行的布局方式的一個主要區別為，當使用float等樣式屬性時，需要對容器中每一個元素指定樣式屬性，當使用彈性盒布局時，只需對容器元素指定樣式屬性。
　　接下來，我們首先對所有樣式類名為content的div元素使用彈性盒布局，這些div元素的容器元素為id屬性值為main的div元素，修改該元素的樣式代碼如下所示：
       #main {            border: 2px solid #382aff;            padding: 1em;            display: -moz-box;            display: -webkit-box;            display: box;        }
       在瀏覽器中打開示例頁面，頁面中所有樣式類名為content的div元素的排列方式被修改為橫向排列，如下圖所示。
2、設置元素排列順序 box-direction
　　可以通過box-direction樣式屬性的使用來控制容器中所有子元素的排列順序，可指定值如下所示。
normal | reverse | inherit      其中normal是默認值，表示按照正常順序排列。所謂正常順序，就是我們看書寫文字的順序，從左往右，由上至下，先出現的元素，就上面或是左邊。而reverse表示反轉?！　?/p>
     修改id屬性值為main的div元素的樣式代碼如下所示：
        #main {            border: 2px solid #382aff;            padding: 1em;            display: -moz-box;            display: -webkit-box;            display: box;            -moz-box-direction: reverse;            -webkit-box-direction: reverse;            box-direction: reverse;        }
       在瀏覽器中打開示例頁面，頁面中所有樣式類名為content的div元素的排列方式被修改為從容器元素，即id屬性值為main的div元素的右端開始橫向反向排列，如下圖所示。
　  接下來首先恢復所有樣式類名為content的div元素的排列方式為橫向正向排列，修改id屬性值為main的div元素的樣式代碼如下所示：
        #main {            border: 2px solid #382aff;            padding: 1em;            display: -moz-box;            display: -webkit-box;            display: box;        }
　　然后對所有樣式類名為content的div元素指定box-direction: reverse;樣式屬性，代碼如下所示：
        .content {            border: 2px solid #ff2834;            padding: 1em;            display: -moz-box;            display: -webkit-box;            display: box;            -moz-box-direction: reverse;            -webkit-box-direction: reverse;            box-direction: reverse;        }
　　在瀏覽器中打開示例頁面，頁面中所有content的div元素的所有section子元素的排列方式被修改為縱向反向排列（不包含section子元素中的section孫元素），如下圖所示。
3、設置元素排列方式 box-orient
      可以通過box-orient來確定容器中子元素的方向。是橫著排還是豎著走?？蛇x的值有：
horizontal | vertical | inline-axis | block-axis | inherit      其中，inline-axis是默認值。且horizontal與inline-axis的表現似乎一致的，讓子元素橫排；而vertical與block-axis的表現也是一致的，讓元素縱列。
     然后對所有樣式類名為content的div元素指定-moz-box-orient:vertical; -webkit-box-orient:vertical; box-orient:vertical; 樣式屬性，代碼如下顯示：
        .content {            border: 2px solid #ff2834;            padding: 1em;            display: -moz-box;            display: -webkit-box;            display: box;            -moz-box-orient:vertical;            -webkit-box-orient:vertical;            -o-box-orient:vertical;            box-orient:vertical;        }
　  在瀏覽器中打開示例頁面，頁面中所有content的div元素的所有section子元素的排列方式被修改為縱向排列（不包含section子元素中的section孫元素），如下圖所示。
4、設置元素寬度 box-flex
       接下來首先介紹如何設置被橫向排列的每一個元素的寬度。
　　可以通過flex屬性值的使用使所有子元素的總寬度等于容器寬度。
　　接下來通過將所有樣式類名為content的div元素的flex屬性值設置為1的方法使所有樣式類名為content的div元素的總寬度等于容器元素，即id屬性值為main的div元素的寬度，代碼如下所示。當所有樣式類名為content的div元素的flex屬性值都被設置為1時，這些div元素的寬度均等。
         .content {            border: 2px solid #ff2834;            padding: 1em;            display: -moz-box;            display: -webkit-box;            display: box;            -webkit-box-flex: 1;            -moz-box-flex: 1;            box-flex: 1;            -moz-box-orient:vertical;            -webkit-box-orient:vertical;            -o-box-orient:vertical;            box-orient:vertical;        }
　   在瀏覽器中打開示例頁面，所有樣式類名為content的div元素的寬度自動增長，這些元素的總寬度等于容器元素，即id屬性值為main的div元素的寬度,每一個樣式類名為content的div元素的寬度均等，如下圖所示。       接下來，我們設置第二個樣式類名為content的div元素的box-flex屬性值為2，代碼如下所示。
        .content:nth-child(2) {            -webkit-box-flex: 2;            -moz-box-flex: 2;            box-flex: 2;        }
       在瀏覽器中打開示例頁面，所有樣式類名為content的div元素的寬度自動增長，第二個類名為content的div元素 的寬度時其他兩個div的2倍，如下圖所示。
      為了更清晰地計算元素寬度，我們取消所有元素的邊框設置及內邊距設置，修改后的完整樣式代碼如下所示。
        #main {            display: -moz-box;            display: -webkit-box;            display: box;        }        .content {            display: -moz-box;            display: -webkit-box;            display: box;            -webkit-box-flex: 1;            -moz-box-flex: 1;            box-flex: 1;            -moz-box-orient:vertical;            -webkit-box-orient:vertical;            -o-box-orient:vertical;            box-orient:vertical;        }        .content:nth-child(2) {            -webkit-box-flex: 2;            -moz-box-flex: 2;            box-flex: 2;        }
      在瀏覽器中打開示例頁面，第二個樣式類名為content的div元素寬度為其他樣式類名為content的div元素寬度的兩倍，假設這些元素的容器元素，即id屬性值為main的div元素的寬度等于600px，則第一個與第三個樣式類名為content的div元素寬度的寬度均等于150px，第二個樣式類名為content的div元素寬度的寬度等于300px。
5、設置垂直方向上的對齊方式 box-align
      box-align決定了垂直方向上的空間利用，也就是垂直方向上的對齊表現。為了便于記憶，我們可以拿來和CSS2中的vertical-align隱射記憶，兩者都有”align”，都是都是垂直方向的對齊。
     box-align的可選參數有：
start | end | center | baseline | stretch     其中stretch為默認值，為拉伸，也就是父標簽高度過高，其孩子元素的高度就多高，start表示頂邊對齊，end為底部對齊，center為居中對齊，baseline表示基線（英文字母o,m,n等的底邊位置線）對齊。
6、設置垂直方向上的對齊方式box-pack
      box-pack決定了父標簽水平遺留空間的使用，其可選值有：
start | end | center | justify      就大部分的行為表現來說分別對應text-align屬性的值：left | right | center | justify；但是，之所以box-pack不使用”left”, 而是”start”，是因為box-direction屬性，這玩意可以反轉原本的排列，原本的“左對齊”反轉后結果是“右對齊”了，此時”left”顯然就詞不達意了，所以使用”start”更具有概括性，就是與父標簽的起始位置對齊，從而不會產生語義與行為上的困擾。
7、box-flex-group和box-ordinal-group
      子元素除了以上說的幾個屬性外，還有兩個屬性box-flex-group和box-ordinal-group，因為這兩個屬性實用性不強，這里就不做詳細的說明。目前沒有瀏覽器支持 box-flex-group 屬性。
     box-ordinal-group用整數值來定義伸縮盒對象的子元素顯示順序。數值越小，位置就越靠前，這不難理解，第一組在最前嘛，隨后第二組，第三組… 例如：box-ordinal-group:1的組就會在box-ordinal-group:2的組前面顯示。于是，我們可以利用這個屬性改變子元素的順序。