小編給大家分享一下通過flex進行網頁布局的方法，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

我們提供的服務有：做網站、網站建設、微信公眾號開發、網站優化、網站認證、大方ssl等。為近1000家企事業單位解決了網站和推廣的問題。提供周到的售前咨詢和貼心的售后服務，是有科學管理、有技術的大方網站制作公司

flex稱為彈性布局，當父元素設置為flex值后子元素會自動成為其成員，再通過設置屬性值來實現各種布局效果。例通過給父元素設置justify-content屬性實現水平垂直居中效果

通過Flex可以簡便、完整、響應式地實現各種頁面布局。隨著瀏覽器的發展，目前，它已經得到了所有瀏覽器的支持，這意味著，現在就能很安全地使用這項功能。接下來將和大家分享如何通過flex進行網頁布局

flex布局

稱為"彈性盒模型"， 當父容器設置了display：flex時，子元素自動成為其成員， 容器默認存在兩根軸：水平方向的主軸和垂直的交叉軸，項目默認沿主軸排列。

flex容器(父容器)的一些屬性：

flex-direction：決定主軸的方向（即項目的排列方向）

flex-wrap：如果一條軸線排不下，如何換行

flex-flow：是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap

justify-content：定義了項目在主軸上的對齊方式

align-items：定義項目在交叉軸上如何對齊

align-content：定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用

實例

flex實現水平垂直居中

* {
            margin: 0;
            padding: 0;
        }

html {
            width: 100%;
            height: 100%;
        }
 body {
            display: flex;
            width: 100%;
            height: 100%;
            background: #eee;
            justify-content: center;
            align-items: center;
        }
 .box {
            width: 200px;
            height: 200px;
            background:pink;
        }

效果圖：

兩列等高布局：

左邊固定寬度，右邊占據剩余寬度：

<style>
    *{
        margin: 0;
        padding:0;
    }
    .grid{
        display: flex;
        border: 1px solid #ccc;
    }
    .left{
    
        background-color:pink;
        flex-basis: 200px;
}
    .right{
    
        background-color:skyblue;
        flex-basis:calc(100% - 200px);
    }
</style>

效果圖：

看完了這篇文章，相信你對通過flex進行網頁布局的方法有了一定的了解，想了解更多相關知識，歡迎關注創新互聯網站制作公司行業資訊頻道，感謝各位的閱讀！

當前題目：通過flex進行網頁布局的方法-創新互聯
文章起源：http://vcdvsql.cn/article18/didjdp.html

成都網站建設公司_創新互聯，為您提供域名注冊、移動網站建設、外貿網站建設、網站設計、網站營銷、微信小程序

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯