css3中彈性盒子佈局-php教程-PHP中文網

首頁

後端開發

php教程

css3中彈性盒子佈局

伊谢尔伦

Nov 24, 2016 pm 03:11 PM

css3

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

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

　　雖然CSS Flexible Box模組已經被公佈了好幾年，但是自開始公佈以來，該模組中所定義的內容已經經過了幾次重大修改。目前發表的正式版本為◦CSS Flexible Box Layout Module - W3C Candidate Recommendation, 18 September 2012。

　　目前為止，Opera 12.10版本以上，IE 11版本以上、Chrome 21版以上、Firefox 22版本以上的瀏覽器均支援此最新版本。

　從範例頁面開始學習最新版本的彈性盒佈局

　　接下來開始透過一個範例頁面開始學習最新版本的彈性盒佈局。此範例頁面中的body元素中的程式碼如下所示。

<body>
<div id="main">
    <div class="content">
        <section>
            <h1 id="section-nbsp">section 1</h1>
            <p>示例文字</p>
        </section>
        <section>
            <h1 id="section-nbsp">section 2</h1>
            <p>示例文字</p>
        </section>
        <section>
            <h1 id="section-nbsp">section 3</h1>
            <p>示例文字</p>
        </section>
        <section>
            <h1 id="section-nbsp">section 4</h1>
            <p>示例文字</p>
        </section>
    </div>
    <div class="content">
        <section>
            <h1 id="section-nbsp">section 5</h1>
            <p>示例文字</p>
            <section>
                <h1 id="section-nbsp">section 6</h1>
                <p>示例文字</p>
            </section>
            <section>
                <h1 id="section-nbsp">section 7</h1>
                <p>示例文字</p>
            </section>
            <section>
                <h1 id="section-nbsp">section 8</h1>
                <p>示例文字</p>
            </section>
    </div>
    <div class="content">
        <section>
            <h1 id="section-nbsp">section 9</h1>
            <p>示例文字</p>
        </section>
        <section>
            <h1 id="section-nbsp">section 10</h1>
            <p>示例文字</p>
        </section>
        <section>
            <h1 id="section-nbsp">section 11</h1>
            <p>示例文字</p>
        </section>
        <section>
            <h1 id="section-nbsp">section 12</h1>
            <p>示例文字</p>
        </section>
    </div>
</div>
</body>

接下來，首先在頁面中各div元素及section元素指定邊框樣式，程式碼如下圖所示。

<style>
#main {
    border: 1px dotted #f0f;
    padding: 1em;
}
.content {
    border: 1px dotted #0ff;
    padding: 1em;
}
section {
    border: 1px dotted #f00;
    padding: 1em;
}
</style>

　　在瀏覽器中開啟目前為止的範例頁面，頁面中各元素從上往下縱向排列，如下圖所示。

css3中彈性盒子佈局

　對範例頁面使用彈性盒佈局

　　彈性盒佈局的指定方法為：對需要佈局的元素的容器元素使用display:flex;樣式屬性。在CSS Flexible Box模組中，此容器元素中的每一個元素均稱為“Flex item”，將此容器元素稱為“Flex container”。

　　彈性盒佈局方式與使用float等樣式屬性進行的佈局方式的一個主要區別為，當使用float等樣式屬性時，需要對容器中每一個元素指定樣式屬性，當使用彈性盒佈局時，只需對容器元素指定樣式屬性。

　　接下來，我們首先對所有樣式類別名為content的div元素使用彈性盒佈局，這些div元素的容器元素為id屬性值為main的div元素，修改該元素的樣式代碼如下所示：

#main {
    border: 1px dotted #f0f;
    padding: 1em;
    display: flex;
}

　在瀏覽器中開啟範例頁面，頁面中所有樣式類別名為content的div元素的排列方式被修改為橫向排列，如下圖所示。

css3中彈性盒子佈局

　設定元素排列方向

　　可以透過flex-direction樣式屬性的使用來控制容器中所有子元素的排列方向，可指定值如下所示。

row:橫向排列（預設值）

row-reverse:橫向反向排列

column:縱向排列

column-reverse:縱向反向排列

　　divid屬性值為main的修改元素的樣式樣式如下所示：

#main {
    border: 1px dotted #f0f;
    padding: 1em;
    display: flex;
    flex-direction: row-reverse;
}

在瀏覽器中開啟範例頁面，頁面中所有樣式類別名為content的div元素的排列方式被修改為從容器元素，即id屬性值為main的div元素的右端開始橫向反向排列，如下圖所示。

css3中彈性盒子佈局

接下來首先恢復所有樣式類別名為content的div元素的排列方式為橫向正向排列，修改id屬性值為main的div元素的樣式代碼如下所示：

#main {
    border: 1px dotted #f0f;
    padding: 1em;
    display: flex;
}

　　然後對所有樣式類別名為content的div元素指定flex-direction: column-reverse;樣式屬性，程式碼如下所示：

.content {
    border: 1px dotted #0ff;
    padding: 1em;
    display: flex;
    flex-direction: column-reverse;
}

　　在瀏覽器中開啟範例頁面，頁面中所有content的div元素的所有section子元素的排列方式被修改為縱向反向排列（不包含section子元素中的section孫元素），如下圖所示。

css3中彈性盒子佈局

　使用order样式属性指定排列顺序

　　使用弹性盒布局的时候，可以通过order属性来改变各元素的显示顺序。可以在每个元素的样式中加入order属性，该属性使用一个表示序号的整数属性值，浏览器在显示的时候根据该序号从小到大来显示这些元素。

　　接下来首先设置所有样式类名为content的div元素的所有section子元素的排列方式为纵向正向排列，修改所有样式类名为content的div元素的样式代码如下所示：

.content {
    border: 1px dotted #0ff;
    padding: 1em;
    display: flex;
    flex-direction: column;
}

　　接下来通过将所有样式类名为content的div元素中的第2个section子元素的order样式属性值设置为-1的方法设置这些section子元素被优先显示在其他section子元素之前，代码如下所示：

.content section:nth-child(2) {
    order: -1;
}

　　在浏览器中打开示例页面，页面中所有样式类名为content的div元素中的第2个section子元素被显示在其他section子元素之前，如下图所示。

css3中彈性盒子佈局

　设置元素宽度及高度

　　接下来首先介绍如何设置被横向排列的每一个元素的宽度。

　　可以通过flex属性值的使用使所有子元素的总宽度等于容器宽度。

　　接下来通过将所有样式类名为content的div元素的flex属性值设置为1的方法使所有样式类名为content的div元素的总宽度等于容器元素，即id属性值为main的div元素的宽度，代码如下所示。当所有样式类名为content的div元素的flex属性值都被设置为1时，这些div元素的宽度均等。

.content {
    border: 1px dotted #0ff;
    padding: 1em;
    display: flex;
    flex-direction: column;
    flex:1;
}

　　在浏览器中打开示例页面，所有样式类名为content的div元素的宽度自动增长，这些元素的总宽度等于容器元素，即id属性值为main的div元素的宽度,每一个样式类名为content的div元素的宽度均等，如下图所示。

css3中彈性盒子佈局

接下来，我们设置第二个样式类名为content的div元素的flex属性值为2，代码如下所示。

.content:nth-child(2) {
    flex:2;
}

　　为了更清晰地计算元素宽度，我们取消所有元素的边框设置及内边距设置，修改后的完整样式代码如下所示。

<style>
#main {
    display: flex;
}
.content {
    display: flex;
    flex-direction: column;
    flex:1;
}
.content section:nth-child(2) {
    order: -1;
}
.content:nth-child(2) {
    flex:2;
}
</style>

　在浏览器中打开示例页面，第二个样式类名为content的div元素宽度为其他样式类名为content的div元素宽度的两倍，假设这些元素的容器元素，即id属性值为main的div元素的宽度等于600px，则第一个与第三个样式类名为content的div元素宽度的宽度均等于150px，第二个样式类名为content的div元素宽度的宽度等于300px。

　　可以使用flex-grow属性来指定元素宽度，但是该样式属性对于元素宽度的计算方法与flex样式属性对于元素宽度的计算方法有所不同。

　　接下来指定所有样式类名为content的div元素的flex-grow样式属性值为1，宽度为150px,指定第二个样式类名为content的div元素的flex-grow样式属性值为为3。修改后的完整样式代码如下所示。

<style>
#main {
    display: flex;
}
.content {
    display: flex;
    flex-direction: column;
    width:150px;
    flex-grow:1;
}
.content section:nth-child(2) {
    order: -1;
}
.content:nth-child(2) {
    flex-grow:3;
}
</style>

　　在浏览器中打开示例页面，假设这些元素的容器元素，即id属性值为main的div元素的宽度等于600，则第一个与第三个样式类名为content的div元素宽度的宽度均等于180px，第二个样式类名为content的div元素宽度的宽度等于240px。对于每个样式类名为content的div元素宽度的计算步骤如下所示：

600(容器宽度)-150*3（三个样式类名为content的div元素宽度的总宽度）=150

150/5(三个样式类名为content的div元素宽度的flex-grow样式属性值的总和)=30

第一个与第三个样式类名为content的div元素宽度的宽度均等于150（其width样式属性值+）+30*1（其flew-grow样式属性值）=180px

第二个样式类名为content的div元素宽度的宽度等于150（其width样式属性值+）+30*3（其flew-grow样式属性值）=240px

　　可以使用flex-shrink属性来指定元素宽度，该样式属性与flex-grow样式属性的区别在于：当子元素的width样式属性值的总和小于容器元素的宽度值时，必须通过flex-grow样式属性来调整子元素宽度，当子元素的width样式属性值的总和大于容器元素的宽度值时，必须通过flex-shrink样式属性来调整子元素宽度。

　　接下来指定所有样式类名为content的div元素的flex-shrink样式属性值为1，宽度为250px,指定第二个样式类名为content的div元素的flex-shrink样式属性值为为3。修改后的完整样式代码如下所示。

<style>
#main {
    display: flex;
}
.content {
    display: flex;
    flex-direction: column;
    width:250px;
    flex-shrink:1;
}
.content section:nth-child(2) {
    order: -1;
}
.content:nth-child(2) {
    flex-shrink:3;
}
</style>

　　在浏览器中打开示例页面，假设这些元素的容器元素，即id属性值为main的div元素的宽度等于600，则第一个与第三个样式类名为content的div元素宽度的宽度均等于220px，第二个样式类名为content的div元素宽度的宽度等于160px。对于每个样式类名为content的div元素宽度的计算步骤如下所示：

250*3（三个样式类名为content的div元素宽度的总宽度）-600(容器宽度)=150

150/5(三个样式类名为content的div元素宽度的flex-shrink样式属性值的总和)=30

第一个与第三个样式类名为content的div元素宽度的宽度均等于250（其width样式属性值+）-30*1（其flew-shrink样式属性值）=220px

第二个样式类名为content的div元素宽度的宽度等于250（其width样式属性值+）-30*3（其flew-grow样式属性值）=160px

　　在使用flex-grow样式属性或flex-shrink样式属性调整子元素宽度时，也可以使用flex-basis样式属性指定调整前的子元素宽度，该样式属性与width样式属性的作用完全相同。

　　可以将flex-grow、flex-shrink以及flex-basis样式属性值合并写入flex样式属性中，方法如下所示。

flex:flex-grow样式属性值 flex-shrink样式属性值 flex-basis样式属性值;

　　在使用flex样式属性值时，flex-grow、flex-shrink以及flex-basis样式属性值均为可选用样式属性值，当不指定flex-grow、flex-shrink样式属性值时，默认样式属性值均为1，当不指定flex-basis样式属性值时，默认样式属性值为0px。

　　修改本示例中的样式代码如下所示：

<style>
#main {
    display: flex;
}
.content {
    display: flex;
    flex-direction: column;
    width:250px;
    flex:250px;
}
.content section:nth-child(2) {
    order: -1;
}
.content:nth-child(2) {
    flex:1 3 250px;
}
</style>

　　在浏览器中打开示例页面，假设这些元素的容器元素，即id属性值为main的div元素的宽度等于600，则第一个与第三个样式类名为content的div元素宽度的宽度均等于220px，第二个样式类名为content的div元素宽度的宽度等于160px。

　　在子元素为横向排列时，flex、flex-grow、flex-shrink以及flex-basis样式属性均用于指定或调整子元素宽度，当子元素为纵向排列时，flex、flex-grow、flex-shrink以及flex-basis样式属性均用于指定或调整子元素高度。

　单行布局与多行布局

　　可以使用flex-wrap样式属性来指定单行布局或多行布局，可指定样式属性值如下所示：

nowrap:不换行

wrap:换行

wrap-reverse:虽然换行，但是换行方向与使用wrap样式属性值时的换行方向相反

　　接下来首先恢复页面内各div元素的边框与内边距(padding)的指定，同时指定所有样式类名为content的div元素的宽度为250px，代码如下所示。

<style>
#main {
    border: 1px dotted #f0f;
    padding: 1em;
    display: flex;
}
.content {
    border: 1px dotted #0ff;
    padding: 1em;
    display: flex;
    flex-direction: column;
    flex:250px;
}
section {
    border: 1px dotted #f00;
    padding: 1em;
}
.content section:nth-child(2) {
    order: -1;
}
</style>

　　然后指定容器元素，即id属性值为main的div元素的flex-wrap样式属性值为wrap，以指定允许对所有样式类名为content的div元素进行换行布局，代码如下所示。

#main {
    border: 1px dotted #f0f;
    padding: 1em;
    display: flex;
    flex-wrap: wrap;
}

　　在浏览器中打开示例页面，当浏览器窗口宽度不足以容纳三个样式类名为content的div元素时，最右边的样式类名为content的div元素被换行显示，如下图所示。

css3中彈性盒子佈局

可以将flex-direction样式属性值与flex-wrap样式属性值合并书写在flex-flow样式属性中。以下两段代码的作用完全相同。

//使用flex-direction样式属性与flex-wrap样式属性
.content {
    flex-direction: row;
    flex-wrap: wrap;
}
//使用flex-flow样式属性
.content {
    flex-flow: row wrap;
}

　弹性盒布局中的一些专用术语

　　接下来首先介绍弹性盒布局中的一些专用术语，在进行布局时这些术语的含义如下图所示。

css3中彈性盒子佈局

main axis:進行佈局時作為佈局基準的軸，在橫向佈局時為水平軸，在縱向佈局時為垂直軸。

main-start / main-end:進行佈局時的佈局起點與佈局終點。在橫向佈局時為容器的左端與右端，縱向佈局時為容器的頂端與底端。

cross axis:與main axis垂直相交的軸，在橫向佈局時為垂直軸，在縱向佈局時為水平軸。

cross-start / cross-end:cross axis軸的起點與終點。在橫向佈局時為容器的頂端與底端，縱向佈局時為容器的左端與右端。將flex-wrap屬性值指定為wrap且進行橫向多行佈局時，按從cross-start到cross-end方向，即從上到下佈局，將flex-wrap屬性值指定為wrap-reverse且進行橫向多行佈局時，按從cross-end到cross-start方向，即從下往上佈局。

　justify-content屬性

　　justify-content屬性用於指定如何佈局容器中除了子元素之外的main axis軸方向（橫向佈局時main axis軸方向為水平方向，縱向佈局時main axis軸方向為垂直方向）上的剩餘空白部分。

　　當flex-grow屬性值不為0時，各子元素在main axis軸方向上自動填滿容器，所以justify-content屬性值無效。

　　可指定justify-content屬性值如下所示：

flex-start：從main-start開始佈局所有子元素（預設值）。

flex-end：從main-end開始佈局所有子元素。

center：居中佈局所有子元素。

space-between：將第一個子元素佈局在main-start處，將最後一個子元素佈局在main-end處，將空白部分平均分配在所有子元素與子元素之間。

space-around：將空白部分平均分配在以下幾處：main-start與第一個子元素之間、各子元素與子元素之間、最後一個子元素與main-end之間。

　　上述各屬性值的差異如下圖所示(灰色代表空白部分)。

css3中彈性盒子佈局

　align-items屬性與align-self屬性

　　align-items屬性與justify-content屬性類似，用於指定子元素的對齊方式，但是align-items屬性指定的是橫向cross axisis（版面時cross axis軸方向為垂直方向，縱向版面時cross axis軸方向為水平方向）上的對齊方式，可指定屬性值如下所示。

flex-start：從cross-start開始佈局所有子元素（預設值）。

flex-end：從cross-end開始佈局所有子元素。

center：居中佈局所有子元素。

baseline：如果子元素的佈局方向與容器的佈局方向不一致，則該值的作用等效於flex-start屬性值的作用。如果子元素的佈局方向與容器的佈局方向保持一致，則所有子元素中的內容沿著基線對齊。

stretch：同一行中的所有子元素高度被調整為最大。若未指定任何子元素高度，則所有子元素高度調整為最接近容器高度（當考慮元素邊框及內邊距時，當邊框寬度與內邊距均為0則等於容器高度）。

　　上述各屬性值的差異如下圖所示(灰色代表空白部分)。

css3中彈性盒子佈局

align-self屬性與align-items屬性的區別在於：align-items被指定為容器元素的樣式屬性，用於指定所有子元素的對齊方式，而align-self屬性被指定為某些子元素的樣式屬性，用於單獨指定這些子元素的對齊方式。例如將容器元素的align-items屬性值指定為center（居中對齊）後，可以將第一個子元素的align-self屬性值指定為flex-start（對齊在cross-start端）。可指定值如下圖所示：

auto:繼承父元素的align-items屬性值

flex-start

flex-end

center

baseline

stretch

center🎜🎜baseline🎜🎜stretch🎜center🎜🎜

　align-content屬性

　　當進行多行佈局時，可以使用align-content屬性來指定各行對齊方式。此屬性與align-items屬性的差異在於：align-items屬性用於指定子元素的對齊方式，而align-content屬性用於指定行對齊方式。可以指定的屬性值如下所示：

flex-start：從cross-start開始佈局所有行。

flex-end：從cross-end開始佈局所有行。

center：居中佈局所有行。

space-between：將第一行佈局在cross-start處，將最後一行佈局在cross-end處，空白部分平均分配在各行之間。

space-around：將空白部分平均分配在以下幾處：cross-start與第一行之間、各行與行之間、最後一行與cross-end。

　　上述各屬性值的差異如下圖所示(灰色代表空白部分)。

css3中彈性盒子佈局

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

PHP：服務器端腳本語言的簡介Apr 16, 2025 am 12:18 AM

PHP是一種服務器端腳本語言，用於動態網頁開發和服務器端應用程序。 1.PHP是一種解釋型語言，無需編譯，適合快速開發。 2.PHP代碼嵌入HTML中，易於網頁開發。 3.PHP處理服務器端邏輯，生成HTML輸出，支持用戶交互和數據處理。 4.PHP可與數據庫交互，處理表單提交，執行服務器端任務。

PHP和網絡：探索其長期影響Apr 16, 2025 am 12:17 AM

PHP在過去幾十年中塑造了網絡，並將繼續在Web開發中扮演重要角色。 1)PHP起源於1994年，因其易用性和與MySQL的無縫集成成為開發者首選。 2)其核心功能包括生成動態內容和與數據庫的集成，使得網站能夠實時更新和個性化展示。 3)PHP的廣泛應用和生態系統推動了其長期影響，但也面臨版本更新和安全性挑戰。 4)近年來的性能改進，如PHP7的發布，使其能與現代語言競爭。 5)未來，PHP需應對容器化、微服務等新挑戰，但其靈活性和活躍社區使其具備適應能力。

為什麼要使用PHP？解釋的優點和好處Apr 16, 2025 am 12:16 AM

PHP的核心優勢包括易於學習、強大的web開發支持、豐富的庫和框架、高性能和可擴展性、跨平台兼容性以及成本效益高。 1)易於學習和使用，適合初學者；2)與web服務器集成好，支持多種數據庫；3)擁有如Laravel等強大框架；4)通過優化可實現高性能；5)支持多種操作系統；6)開源，降低開發成本。

揭穿神話：PHP真的是一種死語嗎？Apr 16, 2025 am 12:15 AM

PHP沒有死。 1)PHP社區積極解決性能和安全問題，PHP7.x提升了性能。 2)PHP適合現代Web開發，廣泛用於大型網站。 3)PHP易學且服務器表現出色，但類型系統不如靜態語言嚴格。 4)PHP在內容管理和電商領域仍重要，生態系統不斷進化。 5)通過OPcache和APC等優化性能，使用OOP和設計模式提升代碼質量。

PHP與Python辯論：哪個更好？Apr 16, 2025 am 12:03 AM

PHP和Python各有優劣，選擇取決於項目需求。 1)PHP適合Web開發，易學，社區資源豐富，但語法不夠現代，性能和安全性需注意。 2)Python適用於數據科學和機器學習，語法簡潔，易學，但執行速度和內存管理有瓶頸。

PHP的目的：構建動態網站Apr 15, 2025 am 12:18 AM

PHP用於構建動態網站，其核心功能包括：1.生成動態內容，通過與數據庫對接實時生成網頁；2.處理用戶交互和表單提交，驗證輸入並響應操作；3.管理會話和用戶認證，提供個性化體驗；4.優化性能和遵循最佳實踐，提升網站效率和安全性。

PHP：處理數據庫和服務器端邏輯Apr 15, 2025 am 12:15 AM

PHP在數據庫操作和服務器端邏輯處理中使用MySQLi和PDO擴展進行數據庫交互，並通過會話管理等功能處理服務器端邏輯。 1）使用MySQLi或PDO連接數據庫，執行SQL查詢。 2）通過會話管理等功能處理HTTP請求和用戶狀態。 3）使用事務確保數據庫操作的原子性。 4）防止SQL注入，使用異常處理和關閉連接來調試。 5）通過索引和緩存優化性能，編寫可讀性高的代碼並進行錯誤處理。