一般而言，一個(gè)靜態(tài)web頁面的呈現(xiàn)需要通過html和css配合實(shí)現(xiàn)。html相當(dāng)于頁面的骨架，規(guī)定了文檔的結(jié)構(gòu)。css相當(dāng)于皮膚，使得頁面能夠按一定的方式進(jìn)行呈現(xiàn)。

HTML使用語義化的標(biāo)簽，規(guī)定了頁面的結(jié)構(gòu)：頁面里面有什么元素，以及各個(gè)元素之間的關(guān)系。元素之間的關(guān)系包括在文檔流中的先后關(guān)系，以及嵌套關(guān)系（DOM樹中的父子）等等。
css規(guī)定了頁面元素的呈現(xiàn)，如文字的對(duì)齊方式，字體，塊的背景色等等。此外，css的一個(gè)重要作用是實(shí)現(xiàn)頁面的布局。

目前，web頁面的布局是通過css實(shí)現(xiàn)的。css實(shí)現(xiàn)頁面的布局也有兩種主要方式：

傳統(tǒng)布局：使用float屬性以及position定位進(jìn)行布局，局限性在于難以實(shí)現(xiàn)垂直居中等效果。
flex布局：一種簡(jiǎn)單靈活的布局方式，適合創(chuàng)建針對(duì)屏幕尺寸不同的設(shè)備的響應(yīng)式頁面，但是不適合于很復(fù)雜的布局。

本文使用百度前端學(xué)院的兩個(gè)題目作為實(shí)例，簡(jiǎn)單描述這兩種布局方式的使用，并對(duì)它們做一個(gè)簡(jiǎn)單的比較。

1. 傳統(tǒng)布局

1.1 傳統(tǒng)的布局要素

傳統(tǒng)布局主要使用了兩個(gè)要素：浮動(dòng)（float）和定位（position）。

1.1.1 浮動(dòng)

浮動(dòng)的框可以向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹?。由于浮?dòng)框不在文檔的普通流中，所以文檔的普通流中的塊框表現(xiàn)得就像浮動(dòng)框不存在一樣。但是浮動(dòng)框可能會(huì)覆蓋住普通流中的框，布局的時(shí)候需要對(duì)普通流中的元素設(shè)置一定的外邊距，避免被浮動(dòng)的框蓋住。
使用浮動(dòng)的方法很簡(jiǎn)單，只需要在需要浮動(dòng)的元素的css里面作如下設(shè)置：

float : left / right ;

浮動(dòng)會(huì)帶來一個(gè)副作用：因?yàn)楦?dòng)元素脫離了文檔流，所以包圍圖片和文本的 div 不占據(jù)空間，導(dǎo)致無法撐開包含浮動(dòng)的元素（如div）。解決該問題的一個(gè)方案是在包含浮動(dòng)元素的元素最后面加上一個(gè)空的div，該div的clear屬性設(shè)為"both"。

1.1.2 定位

定位的基本思想很簡(jiǎn)單，它允許你定義元素框相對(duì)于其正常位置應(yīng)該出現(xiàn)的位置，或者相對(duì)于父元素、另一個(gè)元素甚至瀏覽器窗口本身的位置。

CSS 有三種基本的定位機(jī)制：普通流、浮動(dòng)和絕對(duì)定位。除非專門指定，否則所有框都在普通流中定位。也就是說，普通流中的元素的位置由元素在 HTML 文檔中的位置決定。

通過使用position屬性，我們可以選擇 4 種不同類型的定位：

static：元素框正常生成。塊級(jí)元素生成一個(gè)矩形框，作為文檔流的一部分，行內(nèi)元素則會(huì)創(chuàng)建一個(gè)或多個(gè)行框，置于其父元素中。
relative：元素框偏移某個(gè)距離。元素仍保持其未定位前的形狀，它原本所占的空間仍保留。
absolute：元素框從文檔流完全刪除，并相對(duì)于其包含塊定位。包含塊可能是文檔中的另一個(gè)元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會(huì)關(guān)閉，就好像元素原來不存在一樣。元素定位后生成一個(gè)塊級(jí)框，而不論原來它在正常流中生成何種類型的框。
fixed：元素框的表現(xiàn)類似于將 position 設(shè)置為 absolute，不過其包含塊是視窗本身。

提示：相對(duì)定位實(shí)際上被看作普通流定位模型的一部分，因?yàn)樵氐奈恢孟鄬?duì)于它在普通流中的位置。
注意：行框和行內(nèi)框不是一回事，行框的高度總是能包括它包含的所有行內(nèi)框。

1.2 傳統(tǒng)布局方式實(shí)例

1.2.1案例一

這是百度前端學(xué)院的一道題目：

任務(wù)描述

使用 HTML 與 CSS 按照示例圖（點(diǎn)擊查看）實(shí)現(xiàn)三欄式布局。
左右兩欄寬度固定，中間一欄根據(jù)父元素寬度填充滿，最外面的框應(yīng)理解為瀏覽器。背景色為 #eee 區(qū)域的高度取決于三個(gè)子元素中最高的高度。
任務(wù)注意事項(xiàng)
嘗試 position 和 float 的效果，思考它們的異同和應(yīng)用場(chǎng)景。
注意測(cè)試不同情況，尤其是極端情況下的效果。
圖片和文字內(nèi)容請(qǐng)自行替換，盡可能體現(xiàn)團(tuán)隊(duì)的特色。
調(diào)節(jié)瀏覽器寬度，固定寬度和自適應(yīng)寬度的效果始終符合預(yù)期。
改變中間一欄的內(nèi)容長度，以確保在中間一欄較高和右邊一欄較高時(shí)，父元素的高度始終為子元素中最高的高度。
其他效果圖中給出的標(biāo)識(shí)均被正確地實(shí)現(xiàn)。

要實(shí)現(xiàn)的效果如圖所示：

案例一示例圖

實(shí)現(xiàn)此效果的代碼如下：

<!doctype html>
<html>

<head>
<meta charset="utf-8">
<title>This is the title~~</title>
<style>
body
{
    margin:0;
    padding:0;
}

.container
{
    margin:20px;
    padding:20px;
    background-color:#eee;
    border:2px solid #999;
}

.left
{
    margin:0;
    padding:20px;
    background-color: white;
    border:2px solid #999;
    width:160px;
    float:left;
}

.right
{
    margin:0;
    padding:0 20px;
    background-color: white;
    border:2px solid #999;
    width:80px;
    float:right;
}

.middle
{
    margin:0 140px 0 220px;
    padding:20px;
    background-color: white;
    border:2px solid #999;
}

.img
{
    margin:0;
    float:left;
    text-align: center;
    background-color:gray;
    color:white;
    width:80px;
    height:80px;
}

.right-img
{
    margin:20px 0 20px 0;
    float:left;
    text-align: center;
    background-color:gray;
    color:white;
    width:80px;
    height:80px;
}

.left > p
{
    float:left;
    margin:0 20px;
}


.clear
{
    clear:both;
}

</style>
</head>

<body>
    <div class="container">
        <div class="left">
            <div class="img">
                <p>logo</p>
            </div>
            <p>隊(duì)名</p>
            <div class="clear"></div>
        </div>

        <div class="right">
            <div class="right-img">
                <div>
                    <p>王尼瑪?shù)膌ogo</p>
                </div>
            </div>
            <div class="right-img">
                <div>
                    <p>王尼瑪?shù)膌ogo</p>
                </div>
            </div>
            <div class="right-img">
                <div>
                    <p>王尼瑪?shù)膌ogo</p>
                </div>
            </div>
            <div class="right-img">
                <div>
                    <p>王尼瑪?shù)膌ogo</p>
                </div>
            </div>
            <div class="clear"></div>
        </div>

        <div class="middle">
            <p>前端工程師的職責(zé)是制作標(biāo)準(zhǔn)優(yōu)化的代碼，并增加交互動(dòng)態(tài)功能，開發(fā)JavaScript以及Flash模塊，同時(shí)結(jié)合后臺(tái)開發(fā)技術(shù)模擬整體效果，進(jìn)行豐富互聯(lián)網(wǎng)的Web開發(fā)，致力于通過技術(shù)改善用戶體驗(yàn)。前端工程師,屬于IT技術(shù)職業(yè)的一種，是近5年發(fā)展起來的職業(yè)，舊的體系將其定義為Web前端工程師，主要的技術(shù)包含：HTML、JavaScript、CSS。但I(xiàn)T技術(shù)屬于變化比較快的領(lǐng)域，最近發(fā)生了很大的變革，新的體系下，前端工程師技術(shù)又增加了：nodejs、Hybrid App。Node.js是一個(gè)Javascript運(yùn)行環(huán)境(runtime)。實(shí)際上它是對(duì)Google V8引擎進(jìn)行了封裝。V8引 擎執(zhí)行Javascript的速度非?？?，性能非常好。Node.js對(duì)一些特殊用例進(jìn)行了優(yōu)化，提供了替代的API，使得V8在非瀏覽器環(huán)境下運(yùn)行得更好。Hybrid App（混合模式移動(dòng)應(yīng)用）是指介于web-app、native-app這兩者之間的app，兼具“Native App良好用戶交互體驗(yàn)的優(yōu)勢(shì)”和“Web App跨平臺(tái)開發(fā)的優(yōu)勢(shì)”。主要采用JavaScript語言作為中間語言開發(fā)。因此，前端工程師所涵蓋的職責(zé)范圍，已經(jīng)包含后端、跨平臺(tái)等多種職能，不能簡(jiǎn)單地認(rèn)為只是Web前端工程師。</p>
        </div>
        <div class="clear"></div>

    </div>
</body>

</html>

1.2.1案例二

這是百度前端學(xué)院的另一道題目，用絕對(duì)定位來實(shí)現(xiàn)布局。值得注意的是，絕對(duì)定位的位置值是相對(duì)于最近的已定位的祖先元素，而不一定是body本身。

任務(wù)描述

實(shí)現(xiàn)如示例圖（點(diǎn)擊打開）的效果
灰色元素水平垂直居中，有兩個(gè)四分之一圓位于其左上角和右下角。
任務(wù)注意事項(xiàng)
思考不同情況下（如灰色高度是根據(jù)內(nèi)容動(dòng)態(tài)變化的）水平垂直居中的解決方案。
動(dòng)手試一試各種情況的組合，父元素和子元素分別取不同的 position 值。思考 position 屬性各種取值的真正含義，尤其是 absolute 究竟是相對(duì)誰而言的。
注意測(cè)試不同情況，尤其是極端情況下的效果。
調(diào)節(jié)瀏覽器寬度，灰色元素始終水平居中。
調(diào)節(jié)瀏覽器高度，灰色元素始終垂直居中。
調(diào)節(jié)瀏覽器高度和寬度，黃色扇形的定位始終準(zhǔn)確。

要實(shí)現(xiàn)的效果如圖所示：

案例二示例圖

實(shí)現(xiàn)此效果的代碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Task1-4 demo</title>
    <style>
    body
    {
        margin:0;
        padding:0;
    }
    .parent
    {
        margin:-100px 0 0 -200px;
        padding:0;
        width:400px;
        height:200px;
        background-color:lightgray;
        border:2px solid gray;
        position:absolute;
        left:50%;
        top:50%;
    }
    .left
    {
    margin:0;
    padding:0;
    width:50px;
    height:50px;
    background-color:yellow;
    border:2px solid yellow;
    border-bottom-right-radius:50px; 
    position:absolute;
    top:0;
    left:0;
    }

    .right
    {
    margin:0;
    padding:0;
    width:50px;
    height:50px;
    background-color:yellow;
    border:2px solid yellow;
    border-top-left-radius:50px; 
    position:absolute;
    top:150px;
    left:350px;
    }

    </style>
</head>

<body>
    <div class="parent">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

</html>

2. flex布局

2.1 flex布局要素

因?yàn)镕lexbox是整個(gè)模塊，而不是一個(gè)屬性，它涉及很多東西，包括其整個(gè)組屬性。他們當(dāng)中一部分是容器（父元素，稱為“伸縮容器”），另一部分是子元素（稱為“伸縮項(xiàng)目”）。

常規(guī)布局是基于塊和內(nèi)聯(lián)流方向，而Flex布局是基于flex-flow流。請(qǐng)看看來自w3c規(guī)范中的這張圖，解釋了flex布局的主要思想。

一個(gè)完整的Flexbox指南

根據(jù)伸縮項(xiàng)目排列方式不同，主軸和側(cè)軸方向也有所變化

一個(gè)完整的Flexbox指南

基本上，伸縮項(xiàng)目是沿著主軸（main axis），從主軸起點(diǎn)（main-start）到主軸終點(diǎn)（main-end）或者沿著側(cè)軸（cross axis），從側(cè)軸起點(diǎn)（cross-start）到側(cè)軸終點(diǎn)（cross-end）排列。
主軸（main axis）：伸縮容器的主軸，伸縮項(xiàng)目主要沿著這條軸進(jìn)行排列布局。小心，它不一定是水平的；這主要取決于“justify-content”屬性（詳細(xì)見下文）。
主軸起點(diǎn)（main-start）和主軸終點(diǎn)（main-end）：伸縮項(xiàng)目放置在伸縮容器內(nèi)從主軸起點(diǎn)（main-start）向主軸終點(diǎn)（main-start）方向。
主軸尺寸（main size）：伸縮項(xiàng)目在主軸方向的寬度或高度就是主軸的尺寸。伸縮項(xiàng)目主要的大小屬性要么是寬度，要么是高度屬性，由哪一個(gè)對(duì)著主軸方向決定。
側(cè)軸（cross axis）：垂直于主軸稱為側(cè)軸。它的方向主要取決于主軸方向。
側(cè)軸起點(diǎn)（cross-start）和側(cè)軸終點(diǎn)（cross-end）：伸縮行的配置從容器的側(cè)軸起點(diǎn)邊開始，往側(cè)軸終點(diǎn)邊結(jié)束。
側(cè)軸尺寸（cross size）：伸縮項(xiàng)目的在側(cè)軸方向的寬度或高度就是項(xiàng)目的側(cè)軸長度，伸縮項(xiàng)目的側(cè)軸長度屬性是「width」或「height」屬性，由哪一個(gè)對(duì)著側(cè)軸方向決定。

2.2 flex布局語法

分伸縮容器和伸縮項(xiàng)目兩部分進(jìn)行介紹。

2.1.1 伸縮容器屬性

display：flex | inline-flex（還可以取none/block/inline等值，此時(shí)用途就不是flex布局）
這個(gè)是用來定義伸縮容器，是內(nèi)聯(lián)還是塊取決于設(shè)置的值。這個(gè)時(shí)候，他的所有子元素將變成flex文檔流，稱為伸縮項(xiàng)目。
flex-direction：row | row-reverse | column | column-reverse
這個(gè)主要用來創(chuàng)建主軸，從而定義了伸縮項(xiàng)目放置在伸縮容器的方向。
row(默認(rèn)值)：在“l(fā)tr”排版方式下從左向右排列；在“rtl”排版方式下從右向左排列。
row-reverse：與row排列方向相反，在“l(fā)tr”排版方式下從右向左排列；在“rtl”排版方式下從左向右排列。
column：類似于row，不過是從上到下排列
column-reverse：類似于row-reverse，不過是從下到上排列。
flex-wrap： nowrap | wrap | wrap-reverse
這個(gè)主要用來定義伸縮容器里是單行還是多行顯示，側(cè)軸的方向決定了新行堆放的方向。
nowrap(默認(rèn)值)：伸縮容器單行顯示，“l(fā)tr”排版下，伸縮項(xiàng)目從左到右排列；“rtl”排版上伸縮項(xiàng)目從右向左排列。
wrap：伸縮容器多行顯示，“l(fā)tr”排版下，伸縮項(xiàng)目從左到右排列；“rtl”排版上伸縮項(xiàng)目從右向左排列。
wrap-reverse：伸縮容器多行顯示，“l(fā)tr”排版下，伸縮項(xiàng)目從右向左排列；“rtl”排版下，伸縮項(xiàng)目從左到右排列。（和wrap相反）
flex-flow：這個(gè)是“flex-direction”和“flex-wrap”屬性的縮寫版本。同時(shí)定義了伸縮容器的主軸和側(cè)軸。其默認(rèn)值為“row nowrap”。
justify-content：flex-start | flex-end | center | space-between | space-around
這個(gè)是用來定義伸縮項(xiàng)目沿著主軸線的對(duì)齊方式。當(dāng)一行上的所有伸縮項(xiàng)目都不能伸縮或可伸縮但是已經(jīng)達(dá)到其最大長度時(shí)，這一屬性才會(huì)對(duì)多余的空間進(jìn)行分配。當(dāng)項(xiàng)目溢出某一行時(shí)，這一屬性也會(huì)在項(xiàng)目的對(duì)齊上施加一些控制。
flex-start(默認(rèn)值)：伸縮項(xiàng)目向一行的起始位置靠齊。
flex-end：伸縮項(xiàng)目向一行的結(jié)束位置靠齊。
center：伸縮項(xiàng)目向一行的中間位置靠齊。
space-between：伸縮項(xiàng)目會(huì)平均地分布在行里。第一個(gè)伸縮項(xiàng)目一行中的最開始位置，最后一個(gè)伸縮項(xiàng)目在一行中最終點(diǎn)位置。
space-around：伸縮項(xiàng)目會(huì)平均地分布在行里，兩端保留一半的空間。

一個(gè)完整的Flexbox指南

align-items： flex-start | flex-end | center | baseline | stretch
這個(gè)主要用來定義伸縮項(xiàng)目可以在伸縮容器的當(dāng)前行的側(cè)軸上對(duì)齊方式?？梢园阉胂癯蓚?cè)軸（垂直于主軸）的“justify-content”。
flex-start：伸縮項(xiàng)目在側(cè)軸起點(diǎn)邊的外邊距緊靠住該行在側(cè)軸起始的邊。
flex-end：伸縮項(xiàng)目在側(cè)軸終點(diǎn)邊的外邊距靠住該行在側(cè)軸終點(diǎn)的邊。
center：伸縮項(xiàng)目的外邊距盒在該行的側(cè)軸上居中放置。
baseline：伸縮項(xiàng)目根據(jù)他們的基線對(duì)齊。
stretch（默認(rèn)值）：伸縮項(xiàng)目拉伸填充整個(gè)伸縮容器。此值會(huì)使項(xiàng)目的外邊距盒的尺寸在遵照「min/max-width/height」屬性的限制下盡可能接近所在行的尺寸。

一個(gè)完整的Flexbox指南

align-content： flex-start | flex-end | center | space-between | space-around | stretch
這個(gè)屬性主要用來調(diào)準(zhǔn)伸縮行在伸縮容器里的對(duì)齊方式。類似于伸縮項(xiàng)目在主軸上使用“justify-content”一樣。請(qǐng)注意本屬性在只有一行的伸縮容器上沒有效果。
flex-start：各行向伸縮容器的起點(diǎn)位置堆疊。
flex-end：各行向伸縮容器的結(jié)束位置堆疊。
center：各行向伸縮容器的中間位置堆疊。
space-between：各行在伸縮容器中平均分布。
space-around：各行在伸縮容器中平均分布，在兩邊各有一半的空間。
stretch（默認(rèn)值）：各行將會(huì)伸展以占用剩余的空間。

一個(gè)完整的Flexbox指南

2.2.2 伸縮項(xiàng)目屬性

注意：float、clear和vertical-align在伸縮項(xiàng)目上沒有效果。

order：<integer>
默認(rèn)情況下，伸縮項(xiàng)目是按照文檔流出現(xiàn)先后順序排列。然而，“order”屬性可以控制伸縮項(xiàng)目在他們的伸縮容器出現(xiàn)的順序。
flex-grow：<number> (默認(rèn)值為： 0)
根據(jù)需要用來定義伸縮項(xiàng)目的擴(kuò)展能力。它接受一個(gè)不帶單位的值做為一個(gè)比例。主要用來決定伸縮容器剩余空間按比例應(yīng)擴(kuò)展多少空間。如果所有伸縮項(xiàng)目的“flex-grow”設(shè)置了“1”，那么每個(gè)伸縮項(xiàng)目將設(shè)置為一個(gè)大小相等的剩余空間。如果你給其中一個(gè)伸縮項(xiàng)目設(shè)置了“flex-grow”值為“2”，那么這個(gè)伸縮項(xiàng)目所占的剩余空間是其他伸縮項(xiàng)目所占剩余空間的兩倍。
負(fù)值同樣生效。
**flex-shrink **：<number> (默認(rèn)值為： 1)
根據(jù)需要用來定義伸縮項(xiàng)目收縮的能力。負(fù)值同樣生效。
flex-basis：<length> | auto (默認(rèn)值為： auto)
這個(gè)用來設(shè)置伸縮基準(zhǔn)值，剩余的空間按比率進(jìn)行伸縮。負(fù)值不合法。
flex： none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
這是“flex-grow”、“flex-shrink”和“flex-basis”三個(gè)屬性的縮寫。其中第二個(gè)和第三個(gè)參數(shù)（flex-shrink、flex-basis）是可選參數(shù)。默認(rèn)值為“0 1 auto”。
align-self：auto | flex-start | flex-end | center | baseline | stretch
用來在單獨(dú)的伸縮項(xiàng)目上覆寫默認(rèn)的對(duì)齊方式。屬性值的介紹請(qǐng)參閱“align-items”的屬性值。

2.3 flex布局實(shí)例

這是百度前端學(xué)院的一道題目：

任務(wù)目的
學(xué)習(xí)如何flex進(jìn)行布局，學(xué)習(xí)如何根據(jù)屏幕寬度調(diào)整布局策略。
任務(wù)描述
需要實(shí)現(xiàn)的效果如效果圖（點(diǎn)擊打開）所示，調(diào)整瀏覽器寬度查看響應(yīng)式效果，紅色的文字是說明，不需要寫在 HTML 中。
任務(wù)注意事項(xiàng)

只需要完成HTML，CSS代碼編寫，不需要寫JavaScript
屏幕寬度小于 640px 時(shí)，調(diào)整 Flexbox 的屬性以實(shí)現(xiàn)第四個(gè)元素移動(dòng)到最前面的效果，而不要改動(dòng)第一個(gè)元素的邊框顏色與高度實(shí)現(xiàn)效果圖。
思考 Flexbox 布局和網(wǎng)格布局的異同，以及分別適用于什么樣的場(chǎng)景。可以搜索一下別人的結(jié)論，不過要保持思辨的態(tài)度，不可直接接受別人的觀點(diǎn)。
HTML 及 CSS 代碼結(jié)構(gòu)清晰、規(guī)范

要實(shí)現(xiàn)的效果如圖所示：

flex布局效果圖

實(shí)現(xiàn)此效果的代碼如下：

<!DOCTYPE html>
<html>

<head>
<title>Flex布局</title>
<meta charset="utf-8">
<style>
body
{
  margin:0;
  padding:0;
}

div#container
{
  margin:0;
  padding:20px;
  display:flex;
  flex-direction: row;
  flex-wrap:wrap;
  align-content: space-between;
}

div#box1 { width:150px; height:120px; border: 1px solid #f00;}

div#box2 { width:150px; height: 100px; border: 1px solid #f00; }

div#box3 { width:150px; height:40px; border: 1px solid #f00; }

div#box4 {width:150px; height:200px;border: 1px solid #00f; }

@media all and (min-width: 640px)/*針對(duì)大屏幕設(shè)備（寬度大于640px）的樣式*/
{
div#container
{
  justify-content:space-between;
  align-items:center;
}
}

@media all and (max-width: 640px)/*針對(duì)小屏幕設(shè)備（寬度小于640px）的樣式*/
{
    div#container
    {
        justify-content:space-between;
        align-items:flex-start;
    }
    div#box1 { order:2; }
    div#box2 { order:3; }
    div#box3 { order:4; }
    div#box4 { order:1;}
}
</style>
</head>

<body>
  <div id="container">
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
    <div id="box4"></div>
  </div>
</body>
</html>

3. 兩種布局方式的比較

Flexbox布局（Flexible Box)模塊旨在提供一個(gè)更加有效的方式制定、調(diào)整和分布一個(gè)容器里的項(xiàng)目布局，即使他們的大小是未知或者是動(dòng)態(tài)的。（這里我們稱為Flex）。Flex布局主要思想是讓容器有能力讓其子項(xiàng)目能夠改變其寬度、高度(甚至順序)，以最佳方式填充可用空間（主要是為了適應(yīng)所有類型的顯示設(shè)備和屏幕大小）。Flex容器會(huì)使子項(xiàng)目（伸縮項(xiàng)目）擴(kuò)展來填滿可用空間，或縮小他們以防止溢出容器。最重要的是，F(xiàn)lexbox布局方向不可預(yù)知，他不像常規(guī)的布局（塊就是從上到下，內(nèi)聯(lián)就從左到右）。而那些常規(guī)的適合頁面布局，但對(duì)于支持大型或者雜的應(yīng)用程序（特別是當(dāng)他涉及到取向改變、縮放、拉伸和收縮等）就缺乏靈活性。
注：Flexbox布局最適合應(yīng)用程序的組件和小規(guī)模的布局，而網(wǎng)格布局更適合那些更大規(guī)模的布局。

附錄：參考教程

<a >一個(gè)完整的Flexbox指南</a>
<a >Flex 布局教程：語法篇</a>
<a >Flex 布局教程：實(shí)例篇</a>

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

前端基礎(chǔ) 1 ：CSS布局

前端基礎(chǔ) 1 ：CSS布局

1. 傳統(tǒng)布局

1.1 傳統(tǒng)的布局要素

1.1.1 浮動(dòng)

1.1.2 定位

1.2 傳統(tǒng)布局方式實(shí)例

1.2.1案例一

1.2.1案例二

2. flex布局

2.1 flex布局要素

2.2 flex布局語法

2.1.1 伸縮容器屬性

2.2.2 伸縮項(xiàng)目屬性

2.3 flex布局實(shí)例

3. 兩種布局方式的比較

附錄：參考教程

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

前端基礎(chǔ) 1 ：CSS布局

1. 傳統(tǒng)布局

1.1 傳統(tǒng)的布局要素

1.1.1 浮動(dòng)

1.1.2 定位

1.2 傳統(tǒng)布局方式實(shí)例

1.2.1案例一

1.2.1案例二

2. flex布局

2.1 flex布局要素

2.2 flex布局語法

2.1.1 伸縮容器屬性

2.2.2 伸縮項(xiàng)目屬性

2.3 flex布局實(shí)例

3. 兩種布局方式的比較

附錄：參考教程

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av