亚洲狠狠久久综合一区二区三区

<progress id="73rr5"></progress>
<tbody id="73rr5"><pre id="73rr5"></pre></tbody>

    <tbody id="73rr5"></tbody><dd id="73rr5"><track id="73rr5"></track></dd>
    flex布局,flex布局實例,flex布局教程

    成人自考/成人高考/教師資格證/會計從業資格證/建造師/造價師,一個小程序就夠啦。

    學習flex布局前請一定按照阮一峰老師的教程手工敲一遍,100%理解,光看是一知半解。

    【一】.基礎知識

    flex布局,只要把元素設置為display:flex,此元素即可稱為flex容器,元素的所有子元素都自動成為容器的成員,簡稱flex-item

    flex容器本身有兩根軸,水平的主軸,垂直的交叉軸。因此延伸出4個位置,main start , main end , cross start , cross end

    flex容器成員,單個成員占據的主軸空間叫main size,單個成員占據的交叉軸空間叫cross size

    【二】.容器的屬性

    (2.1).flex-direction(設置主軸的方向,設置了方向會影響容器中成員的排列方向)

        (2.1.1).flex-direction:row,默認值,主軸的方向為水平方向,容器的成員從左到右排列

    <style>
        .caochang{
            display: flex;
        }
    </style>
    <div class="caochang">
        <div class="xuesheng">學生A</div>
        <div class="xuesheng">學生B</div>
        <div class="xuesheng">學生C</div>
    </div>

         顯示ABC,A從頁面最左邊開始顯示

        (2.1.2).flex-direction:row-reverse,主軸的方向為水平方向,容器的成員從右到左排列

    <style>
            .caochang{
                display: flex;
            }
    </style>

         顯示CBA,A從頁面最右邊開始顯示

        (2.1.3).flex-direction:column,主軸的方向為垂直方向,容器成員從上到下排列

        顯示:

       學生A
       學生B
       學生C

        (2.1.4).flex-direction:column-reverse,主軸的方向為垂直方向,容器成員從下到上排列

        顯示:

       學生C
       學生B
       學生A

    flex-direction的所有值總結下就是改變了容器成員的顯示方向和順序

    (2.2).flex-wrap屬性(容器成員一般都是排在一條線上,這個屬性主要來設置如果一行排列不下,如何來換行)

        (2.2.1).flex-wrap:nowrap,默認值,不換行

         超出會顯示橫向滾動條,很奇怪的是我這里超出頁面寬度,文字是縱向顯示的,類似:

      學學
      生生
      A B

        (2.2.2).flex-wrap:wrap,正常換行顯示

        (2.2.3).flex-wrap:wrap-reverse,換行顯示,只不過顯示順序不一樣,假如每個容器元素寬度100%,元素分別為ABC,那么它顯示CBA

    (2.3).flex-flow屬性是flex-direction和flex-wrap的混合寫法,默認值 row nowrap,可以同時設置容器內元素的排列方向和換行方式

          例子flex-flow:row-reverse wrap;

    (2.4).justify-content屬性設置容器內元素在主軸上的對齊方式(默認值flex-start)

        (2.4.1).flex-start 容器元素以主軸的開頭對齊,假設主軸方向為從左到右,相當于左對齊

        (2.4.2).flex-end   容器元素以主軸的結尾對齊,假設主軸方向為從左到右,相當于右對齊

        (2.4.3).center     居中對齊(容器的所有元素顯示在容器中部)

        (2.4.4).space-between 兩端對齊,容器內元素之間間隔相等,是元素之間的間隔相等

        (2.4.4).space-around 每個容器內元素兩側的間隔都相等

    (2.5).align-item屬性設置項目在交叉軸的對齊方式

        (2.5.1).flex-start 交叉軸的起點對齊

        (2.5.2).flex-end   交叉軸的終點對齊

        (2.5.3).center 交叉軸的中點對齊,相當于垂直居中了,所以容器的元素都在中間

        (2.5.4).baseline 以容器元素的第一行文字的基線對齊

        (2.5.5).stretch 默認值,如果容器的元素沒有設置高度或者auto,將占滿整個容器的高度

    (2.6).align-content屬性定義多根軸線的對齊方式。如果只有1根軸線則不起作用。

        (2.6.1).flex-start 交叉軸的起點對齊

        (2.6.2).flex-end   交叉軸的終點對齊

        (2.6.3).center 交叉軸的中點對齊

        (2.6.4).space-between 交叉軸兩端對齊

        (2.6.5).space-around  每根軸線兩側的間隔都相等

        (2.6.6).stretch 軸線占滿整個交叉軸。

    【三】.項目的屬性

    (3.1).order屬性定義項目的排列順序,值越小,排列越靠前,舉個栗子:

    <div  style="order: 3">A</div>
    <div  style="order: 2">B</div>
    <div  style="order: 1">C</div>

    代碼雖然是ABC,頁面顯示的順序是CBA

    (3.2).flex-grow屬性定義項目的放大比例,默認值為0,將容器的元素或者項目在原來基礎放大N倍

    假如所有容器元素項目的flex-grow的值大于0且都相等,則元素項目等分整個容器的空間

    例如

    <div style="flex-grow: 1;background: red;">A</div>
    <div style="flex-grow: 1;background: green;">B</div>
    <div style="flex-grow: 1;background: black;">C</div>

    假如容器的元素分別設置為1,2,3的比例,則第2個元素是第1個元素的2倍,第3個元素是第1個元素的3倍

    例如

    <div style="flex-grow: 1;background: red;">A</div>
    <div style="flex-grow: 2;background: green;">B</div>
    <div style="flex-grow: 3;background: black;">C</div>

    (3.3).flex-shrink屬性設置容器內元素的縮小比例,默認值是1,也就是當容器空間不足,項目會縮小

    假如都設置為1,當容器空間不足,全部容器的元素項都等比例縮小

    假如某個元素項設置為0,則意思當整個容器空間不足時它不縮小。

    (3.4).flex-basis設置項目占據整個容器的主軸空間大小,默認值為auto,支持長度單位和百分比

    類似于自己設置width

    (3.5).flex屬性是flex-grow、flex-shrink、flex-basis的簡寫,默認值0 1 auto

    (3.6).align-self屬性允許單個項目有與其他項目不同的對齊方式,可以覆蓋align-items屬性,默認值auto

    訪客
    郵箱
    網址

    Top 亚洲狠狠久久综合一区二区三区
    <progress id="73rr5"></progress>
    <tbody id="73rr5"><pre id="73rr5"></pre></tbody>

      <tbody id="73rr5"></tbody><dd id="73rr5"><track id="73rr5"></track></dd>