CSS3中display屬性的Flex布局-圣杯布局實例

pinecone 發布于2019-08-29 15:33 / 2918人閱讀

摘要：負值對該屬性無效。我們通常用到的就是這個屬性，在布局的時候會很有用。對于這個屬性，最好是手動敲一下，嘗試一下各種值出現的效果。三圣杯布局布局一直是很重要的知識點，在面試中也會經常遇到，這里就用做一個圣杯布局。

一，為什么寫這篇文章

在很早之前就接觸display：flex布局，尤其是不考慮低版本瀏覽器兼容之后，就開始肆無忌憚的使用了。之前做pc端的時候，要求兼容到ie8，也不會注意到它。后來做移動端，第一次看到display：flex，還是從一個實習生的代碼里，然后查了查資料，居然是這么方便。

簡單的使用及原理請查看阮一峰大神的講解。

二.基本使用

父元素

{
    display:flex;
}

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

可以有6個屬性可以設置，具體不再細說。

子元素

{
    flex:none | auto; /* default auto */
}

/* 1表示該元素撐滿剩余空間 */
{
    flex:1
}

我主要想說的是子元素的flex屬性，剛接觸時確實不好理解。理解了這個就可以實現左固定右自適應的這種布局，通常出現在列表顯示的時候。網上還通常見到flex：1 |none|auto 的這種寫法，就是下面這幾個屬性在作祟。

每個子元素也稱為 “項目”，屬性值有:

1、order ?//定義各個子元素的排列順序，數值越小，排列越靠前，默認為0，可為負數
? ? ?

? ? ?.item{
? ? ?    order:-1;/* 任意數字 */
? ? ?}

2、flex-grow ?//定義子元素的放大比例，默認為0（不放大），前提是父容器有空余空間

    
    .item{
? ? ?    flex-grow: ; /* default 0 */
? ? ?}

3、flex-shrink? //如果所有項目的flex-shrink屬性都為1，當空間不足時，都將等比例縮小。如果一個項目的flex-shrink屬性為0，其他項目都為1，則空間不足時，前者不縮小。

負值對該屬性無效。

    
    .item{
? ? ?    flex-shrink: ; /* default 1 */
? ? ?}

4、flex-basis ?//在子元素分配空余空間前，設定指定的子元素的空間大小，默認auto（原值）

    
    .item{
? ? ?    flex-basis:  | auto; /* default auto */
? ? ?}
    /* 可以設置60% 或者 200px */

5、flex ?//是flex-grow、flex-shrink、flex-basis的組合，默認值flex:0 1 auto;

    
    .item{
? ? ?    flex: none | [ <"flex-grow"> <"flex-shrink">? || <"flex-basis"> ]
? ? ?}
? ? ?/* 該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto) */
? ? ?/* 建議優先使用這個屬性，而不是多帶帶寫三個分離的屬性，因為瀏覽器會推算相關值 */

6、align-self ?//允許單個子元素與其他子元素不一樣的對齊方式，可以覆蓋父元素設定的align-items屬性。默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同stretch（填充滿）。

    
    .item{
? ? ?    align-self: auto | flex-start | flex-end | center | baseline | stretch;
? ? ?}

我們通常用到的就是這個flex屬性，在布局的時候會很有用。

對于這個屬性，最好是手動敲一下，嘗試一下各種值出現的效果。

三.圣杯布局

layout布局一直是css很重要的知識點，在面試中也會經常遇到，這里就用flex做一個圣杯布局。

css

*{
        margin: 0;
        padding: 0;
    }
    html,body{
        width: 100%;
        height: 100%;
    }
    body{
        display: flex;
        flex-direction:column;
    }
    .header,.footer{
        flex: 0 0 80px;
        background-color: #7dbcea;
    }
    .container{
        flex: auto;
        background-color: #145d9c;
        display: flex;
    }
    .container .left,.container .right{
        flex: 0 0 200px;
        background-color: #3a90ce;
    }
    .container .main{
        flex: auto;
        background-color: #145d9c;
    }

html

云服務器 GPU云服務器圣杯布局 flex布局 java中各種布局 display屬性

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113392.html

結合CSS3的布局新特征談談常見布局方法

摘要：案例圖片來自騰訊年的一道前段筆試題，有興趣的同學可以去看一下。騰訊前端面試稿布局布局指頁面布局像一張宣傳海報，以一張精美圖片作為頁面的設計中心。寫在前面最近看到《圖解CSS3》的布局部分，結合自己以前閱讀過的一些布局方面的知識，這里進行一次基于CSS2、3的各種布局的方法總結。常見的頁面布局在拿到設計稿時，作為一個前端人員，我們首先會做的應該是為設計圖大致地劃分區域，然后選擇一...

xuhong 2019-08-28 18:31 評論0 收藏0
結合CSS3的布局新特征談談常見布局方法

摘要：案例圖片來自騰訊年的一道前段筆試題，有興趣的同學可以去看一下。騰訊前端面試稿布局布局指頁面布局像一張宣傳海報，以一張精美圖片作為頁面的設計中心。寫在前面最近看到《圖解CSS3》的布局部分，結合自己以前閱讀過的一些布局方面的知識，這里進行一次基于CSS2、3的各種布局的方法總結。常見的頁面布局在拿到設計稿時，作為一個前端人員，我們首先會做的應該是為設計圖大致地劃分區域，然后選擇一...

cnTomato 2019-08-01 15:01 評論0 收藏0
CSS實例詳解：Flex布局

摘要：本文由云社區發表本文將通過三個簡單的實例，實際應用上篇文章的基礎理論知識，展示下布局是如何解決布局問題。通過對比其他的實現方式，可以看出使用布局可以優雅地實現相同的布局問題。本文由云+社區發表本文將通過三個簡單的實例，實際應用上篇文章的基礎理論知識，展示下Flex布局是如何解決CSS布局問題。一．垂直居中這里同時用非flex布局和flex布局兩種方式來實現，可以對比兩種實現方式...

RobinQu 2019-08-02 13:55 評論0 收藏0
CSS實例詳解：Flex布局

摘要：本文由云社區發表本文將通過三個簡單的實例，實際應用上篇文章的基礎理論知識，展示下布局是如何解決布局問題。通過對比其他的實現方式，可以看出使用布局可以優雅地實現相同的布局問題。本文由云+社區發表本文將通過三個簡單的實例，實際應用上篇文章的基礎理論知識，展示下Flex布局是如何解決CSS布局問題。一．垂直居中這里同時用非flex布局和flex布局兩種方式來實現，可...

Meathill 2019-04-29 15:35 評論0 收藏0
CSS實例詳解：Flex布局

摘要：本文由云社區發表本文將通過三個簡單的實例，實際應用上篇文章的基礎理論知識，展示下布局是如何解決布局問題。通過對比其他的實現方式，可以看出使用布局可以優雅地實現相同的布局問題。本文由云+社區發表本文將通過三個簡單的實例，實際應用上篇文章的基礎理論知識，展示下Flex布局是如何解決CSS布局問題。一．垂直居中這里同時用非flex布局和flex布局兩種方式來實現，可以對比兩種實現方式...

Magicer 2019-08-30 15:54 評論0 收藏0