網頁布局之flex布局

作者：龍時(shí)間：2018-07-20 浏覽：

1.引言

Flex布局方案很早都提出來(lái)了(le)，然後可(kě)以簡便、完整、響應式地實現各種頁面布局。随著(zhe)浏覽器的(de)發展，目前，它已經得(de)到了(le)所有浏覽器的(de)支持，這(zhè)意味著(zhe)，現在就能很安全地使用(yòng)這(zhè)項功能。.

2.網頁布局方案

在網頁設計過程中，水(shuǐ)平垂直居中是很常用(yòng)的(de)，但是傳統的(de)方案使用(yòng)起來(lái)分(fēn)廠費勁，下(xià)面來(lái)看flex如何實現

        * {
            margin: 0;
            padding: 0;
        }
        
        html {
            width: 100%;
            height: 100%;
        }
        
        body {
            display: flex;
            width: 100%;
            height: 100%;
            background: #eee;
            justify-content: center;
            align-items: center;
        }
        
        .box {
            width: 200px;
            height: 300px;
            background: yellowgreen;
        }
        
        <body>
            <div class="box"></div>
        </body>

搜狗截圖20180720105627.jpg

如此看來(lái)這(zhè)樣水(shuǐ)平垂直居中是不是很方便的(de)實現了(le)，

3.什(shén)麽是flex布局？

意爲"彈性盒模型"，用(yòng)來(lái)爲盒狀模型提供最大(dà)的(de)靈活性。Webkit 内核的(de)浏覽器，必須加上-webkit前綴。當父容器設置了(le)display：flex時(shí)。子元素自動成爲其成員(yuán)，容器默認存在兩根軸：水(shuǐ)平方向的(de)主軸和(hé)垂直的(de)交叉軸，項目默認沿主軸排列。

3.1flex容器(父容器)的(de)一些屬性：

//屬性決定主軸的(de)方向（即項目的(de)排列方向）
flex-direction

//默認情況下(xià)，項目都排在一條線（又稱"軸線"）上。flex-wrap屬性定義，如果一條軸線排不下(xià)，如何換行
flex-wrap

//flex-direction屬性和(hé)flex-wrap屬性的(de)簡寫形式，默認值爲row nowrap。
flex-flow

//屬性定義了(le)項目在主軸上的(de)對(duì)齊方式。
justify-content

//屬性定義項目在交叉軸上如何對(duì)齊。
align-items

//屬性定義了(le)多(duō)根軸線的(de)對(duì)齊方式。如果項目隻有一根軸線，該屬性不起作用(yòng)。
align-content

3.2flex項目(子元素)的(de)一些屬性


//定義項目的(de)排列順序。數值越小，排列越靠前，默認爲0。
order

//定義項目的(de)放大(dà)比例，默認爲0，即如果存在剩餘空間，也(yě)不放大(dà)。
flex-grow

//flex-shrink屬性定義了(le)項目的(de)縮小比例，默認爲1，即如果空間不足，該項目将縮小。
flex-shrink

//定義了(le)在分(fēn)配多(duō)餘空間之前，項目占據的(de)主軸空間（main size）。浏覽器根據這(zhè)個(gè)屬性，計算(suàn)主軸是否有多(duō)餘空間。它的(de)默認值爲auto，即項目的(de)本來(lái)大(dà)小。
flex-basis

//flex-grow, flex-shrink 和(hé) flex-basis的(de)簡寫，默認值爲0 1 auto。後兩個(gè)屬性可(kě)選
flex

//允許單個(gè)項目有與其他(tā)項目不一樣的(de)對(duì)齊方式，可(kě)覆蓋align-items屬性。默認值爲auto，表示繼承父元素的(de)align-items屬性，如果沒有父元素，則等同于stretch。
align-self

4.總結

css3中的(de)flex布局是很方便布局的(de)，雖然是個(gè)新東西，但是浏覽器的(de)發展，對(duì)其的(de)支持也(yě)較好，建議(yì)在以後的(de)設計中多(duō)去使用(yòng)，一方面是潮流，另一方面，也(yě)是推動技術發展

上一篇：武漢網站制作教你怎樣優化(huà)圖片加載速度

下(xià)一篇：武漢網絡公司在設計中如何判斷加載完畢

雲南雲豹網絡科技股份有限公司