flex 圣杯布局

senntyou 發布于2019-04-23 11:48 / 3169人閱讀

摘要：基本思路圣杯布局分為段上中下。中段被分為左中右塊。采用布局時，先把彈性容器主軸設置為垂直方向上中下塊彈性項目設置均勻拉伸或固定上下兩端大小，讓中間自動拉伸。中間塊設置為自動拉伸，左右兩塊可設置固定寬度。

基本思路

圣杯布局分為3段：上、中、下。? 中段被分為：左、中、右3塊。

1：采用flex布局時，先把彈性容器主軸設置為垂直方向（flex-direction:column）

2：上、中、下3塊彈性項目設置均勻拉伸（flex:1）或固定上、下兩端大小，讓中間自動拉伸。注意：flex:拉伸是方向為主軸方向

3：中段部分在設置為彈性容器，主軸方向為水平方向（flex-direction:row），此時左、中、右3塊為彈性項目。中間塊設置為自動拉伸，左、右兩塊可設置固定寬度。

代碼

    <div class="container">
        <div class="header">div>
        <div class="content">
            <div class="left">div>
            <div class="center">div>
            <div class="right">div>
        div>
        <div class="footer">div>
    div>

.container{
    display: flex;
    flex-direction: column;
    height: 100vh;
}
.header,
.footer{
    height: 75px;
    background: greenyellow;
}
.content{
    display: flex;
    flex-direction: row;
    flex: 1;
}
.left,.right{
    width:200px;
    background: darkorange;
}
.center{
    flex: 1;
}

云服務器 GPU云服務器圣杯布局 flex布局圣杯 flex

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

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

CSS Flex 布局：用 Flex 來實現圣杯布局

摘要：布局是年提出的，目前已經被所有瀏覽器支持，也是我現在布局的首選方案。實踐用來實現圣杯布局圣杯布局指的是一種最常見的網站布局。一般情況下，這種布局要求固定高度，固定寬度，自適應。 Flex 布局是 W3C 2009年提出的，目前已經被所有瀏覽器支持，也是我現在布局的首選方案。Flex 布局使用起來是非常簡單的，本文談一談平時使用可能需要注意的問題。 align-content 平時使用 ...

Olivia 2019-08-22 15:13 評論0 收藏0
CSS布局--圣杯布局和雙飛翼布局以及使用Flex實現圣杯布局

摘要：圣杯布局雙飛翼布局所謂圣杯布局和雙飛翼布局其實解決的問題是相同的，都是解決左右兩欄固定寬度，中間部分自適應，其中某部分內容比其他內容高的時候，保證三者元素等高。雙飛翼用在外層多加了一個然后改用。前言我曾一度覺得總寫css的前端很low，有了這種思想以后我便遠離網頁布局，H5的工作更不想接，沉迷于頁面邏輯和封裝組件。直到最近我面試，面試官說我css3理解的不熟，我起初很不屑，但后來靜...

zqhxuyuan 2019-08-30 14:11 評論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
圣杯布局和雙飛翼布局

摘要：參考文章同學的關于圣杯布局，圣杯布局和雙飛翼布局的區別經典布局圣杯布局實現的效果主要在中，和固定寬度，首先渲染，且自適應寬度。 ps: 參考文章 DotHide同學的關于圣杯布局，圣杯布局和雙飛翼布局的區別經典布局圣杯布局 showImg(https://segmentfault.com/img/remote/1460000015851268?w=682&h=247); #hea...

ZweiZhao 2019-08-29 16:13 評論0 收藏0