彈性佈局詳解——5個div讓你學會彈性佈局

時間 2019-11-13

標籤彈性佈局詳解 div 讓你學會欄目 CSS 简体版

原文原文鏈接

前言css

JReduhtml

　在網頁製做過程當中，佈局是咱們最重要的一個環節。能夠說佈局的好壞直接影響到整個網頁的成敗！佈局成，則事半功倍；佈局敗，則事倍功半。隨着移動互聯的到來，響應式網站風靡。這也就興起了一種新興的佈局方式——彈性佈局。取代咱們以前「display+float+position」的佈局形式，採用全新的彈性佈局，會讓你的網站如絲般順滑！今天，就讓咱們一塊兒來學習一下彈性佈局，讓咱們用5個div玩轉彈性佈局吧~瀏覽器

　本章內容將詳細介紹Android事件的具體處理及常見事件。ide

1 彈性佈局簡介

彈性佈局，又稱「Flex佈局」，是由W3C老大哥於2009年推出的一種佈局方式。能夠簡便、完整、響應式地實現各類頁面佈局。並且已經獲得全部主流瀏覽器的支持，咱們能夠放心大膽的使用。佈局

>>> 瞭解兩個基本概念，接下來會頻繁提到：學習

① 容器：須要添加彈性佈局的父元素；測試

② 項目：彈性佈局容器中的每個子元素，稱爲項目；字體

>>> 瞭解兩個基本方向，這個牽扯到彈性佈局的使用：flex

① 主軸：在彈性佈局中，咱們會經過屬性規定水平/垂直方向爲主軸；網站

② 交叉軸：與主軸垂直的另外一方向，稱爲交叉軸。

2 彈性佈局的使用

① 給父容器添加display: flex/inline-flex;屬性，便可使容器內容採用彈性佈局顯示，而不遵循常規文檔流的顯示方式；

② 容器添加彈性佈局後，僅僅是容器內容採用彈性佈局，而容器自身在文檔流中的定位方式依然遵循常規文檔流；

③ display:flex; 容器添加彈性佈局後，顯示爲塊級元素；

display:inline-flex; 容器添加彈性佈局後，顯示爲行級元素；

④ 設爲 Flex佈局後，子元素的float、clear和vertical-align屬性將失效。可是position屬性，依然生效。

2.1代碼實例

<div id="div">
            <div class="div1">1</div>
            <div class="div2">2</div>
            <div class="div3">3</div>
            <div class="div4">4</div>
        </div>

#div{
                width: 400px;
                height: 400px;
                background-color: yellow;
                display: flex;
                
            }
            #div div{
                width: 100px;
                height: 100px;
                background-color: blue;
                color: white;
                font-size: 30px;
                
            }

五個簡單的div，只給父容器添加了display: flex;屬性，就可讓容器內部打破原有文檔流模式，展示爲彈性佈局。

簡單的瞭解一下彈性佈局後，咱們來詳解一下配合「display: flex;」使用的12大屬性。其中，12個屬性分爲兩類，6個做用於父容器，6個做用於子項目。

3 做爲父容器的6大屬性

① flex-direction屬性決定主軸的方向（即項目的排列方向）。

row（默認值）：主軸爲水平方向，起點在左端；

row-reverse：主軸在水平方向，起點在右端；

column：主軸爲垂直方向，起點在上沿。

column-reverse：主軸爲垂直方向，起點在下沿。

② flex-wrap屬性定義，若是一條軸線排不下，如何換行。

nowrap（默認）：不換行。當容器寬度不夠時，每一個項目會被擠壓寬度；

wrap：換行，而且第一行在容器最上方；

wrap-reverse：換行，而且第一行在容器最下方。

③ flex-flow 是flex-direction和flex-wrap的縮寫形式，默認值爲：flex-flow: row wrap; 不作過多解釋

④ justify-content屬性定義了項目在主軸上的對齊方式。

>>> 此屬性與主軸方向息息相關。

主軸方向爲：row-起點在左邊，row-reverse-起點在右邊， column-起點在上邊，column-reverse-起點在下邊

flex-start（默認值）：項目位於主軸起點。

flex-end：項目位於主軸終點。

center：居中

space-between：兩端對齊，項目之間的間隔都相等。(開頭和最後的項目，與父容器邊緣沒有間隔)

space-around：每一個項目兩側的間隔相等。因此，項目之間的間隔比項目與邊框的間隔大一倍。(開頭和最後的項目，與父容器邊緣有必定的間隔)

⑤ align-items屬性定義項目在交叉軸上如何對齊。

flex-start：交叉軸的起點對齊。

flex-end：交叉軸的終點對齊。

center：交叉軸的中點對齊。

baseline: 項目的第一行文字的基線對齊。(文字的行高、字體大小會影響每行的基線)

stretch（默認值）：若是項目未設置高度或設爲auto，將佔滿整個容器的高度。

⑥ align-content屬性定義了多根軸線的對齊方式。若是項目只有一根軸線，該屬性不起做用。

(當項目換爲多行時，可以使用align-content取代align-items)

flex-start：與交叉軸的起點對齊。

flex-end：與交叉軸的終點對齊。

center：與交叉軸的中點對齊。

space-between：與交叉軸兩端對齊，軸線之間的間隔平均分佈。

space-around：每根軸線兩側的間隔都相等。因此，軸線之間的間隔比軸線與邊框的間隔大一倍。

stretch（默認值）：軸線佔滿整個交叉軸。

4 Android 做用於子項目的6大屬性

① order屬性定義項目的排列順序。數值越小，排列越靠前，默認爲0。

② flex-grow屬性定義項目的放大比例，默認爲0，即若是存在剩餘空間，也不放大。

③ flex-shrink屬性定義了項目的縮小比例，默認爲1，即若是空間不足，該項目將縮小。

④ flex-basis定義項目佔據的主軸空間。(若是主軸爲水平，則設置這個屬性，至關於設置項目的寬度。原width將會失效。)

⑤ flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲0 1 auto。後兩個屬性可選。

此屬性有兩個快捷設置：auto=(1 1 auto)/none=(0 0 auto)

⑥ align-self:定義單個項目自身在交叉軸上的排列方式，能夠覆蓋掉容器上的align-items屬性。

屬性值：與align-items相同，默認值爲auto，表示繼承父容器的align-items屬性值。

好了，相信到這裏，全部同窗都可以理解flex彈性佈局了吧~~學習一個新知識，字不如表，表不如圖。但願這5個div的圖解，可以讓全部同窗深入的理解Flex彈性佈局~接下來，讓咱們愉快的拋棄Float、拋棄Position，一塊兒擁抱Flex吧！！

最後，全部的源碼附上，須要的同窗自行測試哦~

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #div{
                width: 500px;
                height: 400px;
                background-color: yellow;
                display: flex;
                /*flex-direction: column-reverse;*/
                /*flex-wrap: wrap;*/
                /*justify-content: space-around;*/
                /*align-items: stretch;*/
                /*align-content: stretch;*/
            }
            #div div{
                width: 100px;
                height: 100px;
                background-color: blue;
                color: white;
                font-size: 30px;
                /*flex-shrink: 0;*/
            }
            #div .div1{
                /*font-size: 48px;*/
                /*order: 1;*/
                /*flex-grow: 1;*/
                /*flex-shrink: 0;*/
                /*background-color: red;*/
            }
            #div .div3{
                /*flex-grow: 2;*/
                background-color: green;
                /*flex-basis: 200px;*/
                align-self: flex-end;
            }
        </style>
    </head>
    
    <body>
        <div id="div">
            <div class="div1">1</div>
            <div class="div2">2</div>
            <div class="div3">3</div>
            <div class="div4">4</div>
        </div>
    </body>
</html>