通過(guò)flex進(jìn)行網(wǎng)頁(yè)布局的方法

小編給大家分享一下通過(guò)flex進(jìn)行網(wǎng)頁(yè)布局的方法，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

創(chuàng)新互聯(lián)公司主營(yíng)湞江網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,APP應(yīng)用開(kāi)發(fā),湞江h(huán)5微信小程序開(kāi)發(fā)搭建,湞江網(wǎng)站營(yíng)銷(xiāo)推廣歡迎湞江等地區(qū)企業(yè)咨詢(xún)

flex稱(chēng)為彈性布局，當(dāng)父元素設(shè)置為flex值后子元素會(huì)自動(dòng)成為其成員，再通過(guò)設(shè)置屬性值來(lái)實(shí)現(xiàn)各種布局效果。例通過(guò)給父元素設(shè)置justify-content屬性實(shí)現(xiàn)水平垂直居中效果

通過(guò)Flex可以簡(jiǎn)便、完整、響應(yīng)式地實(shí)現(xiàn)各種頁(yè)面布局。隨著瀏覽器的發(fā)展，目前，它已經(jīng)得到了所有瀏覽器的支持，這意味著，現(xiàn)在就能很安全地使用這項(xiàng)功能。接下來(lái)將和大家分享如何通過(guò)flex進(jìn)行網(wǎng)頁(yè)布局

flex布局

稱(chēng)為"彈性盒模型"， 當(dāng)父容器設(shè)置了display：flex時(shí)，子元素自動(dòng)成為其成員， 容器默認(rèn)存在兩根軸：水平方向的主軸和垂直的交叉軸，項(xiàng)目默認(rèn)沿主軸排列。

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

flex-direction：決定主軸的方向（即項(xiàng)目的排列方向）

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

flex-flow：是flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫(xiě)形式，默認(rèn)值為row nowrap

justify-content：定義了項(xiàng)目在主軸上的對(duì)齊方式

align-items：定義項(xiàng)目在交叉軸上如何對(duì)齊

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

實(shí)例

flex實(shí)現(xiàn)水平垂直居中

* {
            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;
        }

效果圖：

兩列等高布局：

左邊固定寬度，右邊占據(jù)剩余寬度：

<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>

效果圖：

看完了這篇文章，相信你對(duì)通過(guò)flex進(jìn)行網(wǎng)頁(yè)布局的方法有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

分享名稱(chēng)：通過(guò)flex進(jìn)行網(wǎng)頁(yè)布局的方法
本文網(wǎng)址：http://www.jbt999.com/article36/pspppg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、網(wǎng)站排名、商城網(wǎng)站、網(wǎng)站改版、App設(shè)計(jì)、電子商務(wù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：[email protected]。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)