flex常用布局

Sticky Footer

當(dāng)頁面內(nèi)容高度小于可視區(qū)域高度時枫虏，footer 吸附在底部；當(dāng)頁面內(nèi)容高度大于可視區(qū)域高度時爬虱，footer 被撐開排在 content 下方隶债；

360截圖16240127357130.png

<style>
        body {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }
        header{
            background: rgba(0,0,0,.1);
        }
        article {
            flex: auto;
        }
        footer{
            background: rgba(0,0,0,.1);
            height: 50px;
        }
    </style>
    
    <header>HEADER</header>
    <article>CONTENT</article>
    <footer>FOOTER</footer>

Fixed-Width Sidebar

在上-中-下布局的基礎(chǔ)上，加了左側(cè)定寬 sidebar跑筝。

2.png

<style>
        body {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .content {
            flex: auto;
            display: flex;
        }
        header{
            background: rgba(0,0,0,.1);
        }
        aside{
            background: rgba(0,0,0,.2);
        }
        article {
            flex: auto;
            /* height: 1400px; */
        }
        footer{
            background: rgba(0,0,0,.1);
        }
    </style>

    <header>HEADER</header>
    <div class="content">
        <aside>ASIDE</aside>
        <article>CONTENT</article>
    </div>
    <footer>FOOTER</footer>

Sidebar

左邊是定寬 sidebar死讹，右邊是上-中-下布局。

3.png

     <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            min-height: 100vh;
            display: flex;
        }

        aside {
            flex: none;
            width: 200px;
            background: rgba(0, 0, 0, .2);
        }

        .content {
            flex: auto;
            display: flex;
            flex-direction: column;
        }

        .content article {
            flex: auto;
            background: rgba(0, 0, 0, .1);
        }
    </style>

    <aside>ASIDE</aside>
    <div class="content">
        <header>HEADER</header>
        <article>CONTENT</article>
        <footer>FOOTER</footer>
    </div>

Sticky Sidebar

左側(cè) sidebar 固定在左側(cè)且與視窗同高曲梗，當(dāng)內(nèi)容超出視窗高度時赞警，在 sidebar 內(nèi)部出現(xiàn)滾動條。左右兩側(cè)滾動條互相獨(dú)立虏两。

4.png

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            height: 100vh;
            display: flex;
        }

        aside {
            flex: none;
            width: 200px;
            overflow-y: auto;
            display: block;
            background: rgba(0, 0, 0, .2);
        }
        aside p{
            height: 350px;
        }
        .content {
            flex: auto;
            display: flex;
            flex-direction: column;
            overflow-y: auto;
        }

        .content article {
            flex: auto;
            background: rgba(0, 0, 0, .1);
        }
    </style>

    <aside>
        ASIDE
        <p>item</p>
        <p>item</p>
        <p>item</p>
    </aside>
    <div class="content">
        <header>HEADER</header>
        <article>CONTENT</article>
        <footer>FOOTER</footer>
    </div>

flex屬性

flex 是 flex-grow愧旦、flex-shrink、flex-basis的縮寫定罢。 flex 的默認(rèn)值是 0 1 auto笤虫。

flex-grow -----用來“瓜分”父項(xiàng)的“剩余空間”。

12904618-3e41b8713610e6e8_看圖王.web.jpg

容器的寬度為400px, 子項(xiàng)1的占用的基礎(chǔ)空間(flex-basis)為50px祖凫，子項(xiàng)2占用的基礎(chǔ)空間是70px琼蚯，子項(xiàng)3占用基礎(chǔ)空間是100px，剩余空間為 400-50-70-100 = 180px惠况。

其中子項(xiàng)1的flex-grow: 0(未設(shè)置默認(rèn)為0)凌停，子項(xiàng)2flex-grow: 2，子項(xiàng)3flex-grow: 1售滤，剩余空間分成3份罚拟，子項(xiàng)2占2份(120px)，子項(xiàng)3占1份(60px)完箩。

所以子項(xiàng)1真實(shí)的占用空間為: 50+0 = 50px赐俗，子項(xiàng)2真實(shí)的占用空間為: 70+120 = 190px，子項(xiàng)3真實(shí)的占用空間為: 100+60 = 160px弊知。

flex-shrink ----用來“吸收”超出的空間

12904618-ed1819e7b3415dec_看圖王.web.jpg

容器的寬度為400px, 子項(xiàng)1的占用的基準(zhǔn)空間(flex-basis)為250px阻逮，子項(xiàng)2占用的基準(zhǔn)空間是150px，子項(xiàng)3占用基準(zhǔn)空間是100px秩彤，總基準(zhǔn)空間為 250+150+100=500px叔扼。

容器放不下事哭，多出來的空間需要被每個子項(xiàng)根據(jù)自己設(shè)置的flex-shrink 進(jìn)行吸收载矿。子項(xiàng)1的flex-shrink: 1(未設(shè)置默認(rèn)為1)峭咒，子項(xiàng)2 flex-shrink: 2，子項(xiàng)3 flex-shrink: 2措嵌。

子項(xiàng)1需要吸收的的空間為 (2501)/(2501+1502+1002) * 100 = 33.33px与柑，子項(xiàng)1真實(shí)的空間為 250-33.33 = 216.67px谤辜。

同理子項(xiàng)2吸收的空間為(1502)/(2501+1502+1002) * 100=40px，子項(xiàng)2真實(shí)空間為 150-40 = 110px价捧。

子項(xiàng)3吸收的空間為(1002)/(2501+1502+1002) * 100 = 26.67px丑念，真實(shí)的空間為100-26.67=73.33px。

flex-basis

flex-basis 用于設(shè)置子項(xiàng)的占用空間结蟋。如果設(shè)置了值脯倚，則子項(xiàng)占用的空間為設(shè)置的值；如果沒設(shè)置或者為 auto嵌屎，那子項(xiàng)的空間為width/height 的值挠将。

當(dāng) flex 取值為 none，則計(jì)算值為 0 0 auto

.item {flex: none;}
.item {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
}

當(dāng) flex 取值為 auto编整，則計(jì)算值為 1 1 auto

.item {flex: auto;}
.item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
}

當(dāng) flex 取值為一個非負(fù)數(shù)字，則該數(shù)字為 flex-grow 值乳丰，flex-shrink 取 1掌测，flex-basis 取 0%

.item {flex: 1;}
.item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}

擴(kuò)展：

基本網(wǎng)格布局

最簡單的網(wǎng)格布局，就是平均分布产园。

aIVfIn.png

這里最關(guān)鍵的就是flex:1使得各個子元素可以等比伸縮

<div class="Grid">
    <div class="Grid-cell">1/2</div>
    <div class="Grid-cell">1/2</div>
  </div>
  <div class="Grid">
    <div class="Grid-cell">1/3</div>
    <div class="Grid-cell">1/3</div>
    <div class="Grid-cell">1/3</div>
  </div>

<style>
.Grid {
  display: flex;
}

.Grid-cell {
  flex: 1;
  background: #eee;
  margin: 10px;
}
</style>

百分比布局

某個網(wǎng)格的寬度為固定的百分比汞斧，其余網(wǎng)格平均分配剩余的空間。

mQF3i2.png

這里最關(guān)鍵的是通過flex的第三個屬性什燕，也就是flex-basis來定義元素占據(jù)的空間粘勒。

<div class="Grid">
    <div class="Grid-cell col2">50%</div>
    <div class="Grid-cell">auto</div>
    <div class="Grid-cell ">auto</div>
</div>
<div class="Grid">
    <div class="Grid-cell">auto</div>
    <div class="Grid-cell col2">50%</div>
    <div class="Grid-cell clo3">1/3</div>
</div>

<style>
.col2 {
  flex: 0 0 50%;
}
.col3 {
  flex: 0 0 33.3%;
}
</style>