CSS例項詳解：Flex佈局

騰訊雲加社群發表於2018-12-17
CSSFlex

本文由雲+社群發表

本文將通過三個簡單的例項，實際應用上篇文章的基礎理論知識，展示下Flex佈局是如何解決CSS佈局問題。

一．垂直居中

這裡同時用非flex佈局和flex佈局兩種方式來實現，可以對比兩種實現方式的差異。

1.1用margin實現垂直居中

實現方式：

父元素採用相對定位，子元素採用絕對定位，先將元素的定點定位到父元素的中心，再使用margin負值法，即子元素自身寬度、高度的一半，將其拉回到父元素的中心。

實現效果：

img

附上完整程式碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>垂直居中--normal</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }

        .container {
            width: 500px;
            height: 300px;
            margin: 80px;
            border: 1px solid blue;

            position: relative;
        }

        .item {
            width: 300px;
            height: 200px;
            border: 1px solid red;

            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -150px;
            margin-top: -100px;

        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item"></div>
    </div>
</body>

</html>
複製程式碼

1.2用flex實現垂直居中

實現方式：

父元素啟用flex佈局（display:flex），同時設定主軸上居中對齊（justify-content:center）、交叉軸上居中對齊（align-items:center）。子元素不需要額外設定樣式。

實現效果：同上

附上完整程式碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>垂直居中--flex</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }
        .container{
            width:500px;
            height:300px;
            margin:80px;
            border:1px solid blue;

            display:flex;
            justify-content: center;
            align-items: center;
        }
        .item{
            width:300px;
            height:200px;
            border:1px solid red;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item"></div>
    </div>
</body>
</html>
複製程式碼

二．聖盃佈局

2.1 普通方式實現聖盃佈局

在我之前的文章聖盃佈局與雙飛翼佈局中詳細介紹過如何實現一個聖盃佈局：

(1)中間的三欄佈局，這裡採用margin負值法：兩邊兩欄寬度固定，中間欄寬度自適應，左欄、右欄、中間欄向左浮動，左欄的margin-left設為-100%，中間欄的width設為100%，右欄的margin-left設為-右欄寬度。

(2)給container設定padding-left和padding-right屬性，值分別為左欄、右欄的寬度；

(3)將左右兩欄設定為相對定位，同時左欄的left值設為-左欄寬度，右欄的right設為-右欄寬度。

實現效果：

img

實現程式碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>聖盃佈局</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }

        header,
        footer {
            height: 100px;
            width: 100%;
            background-color: #bbbbbb;
        }

        .container {
            height: 300px;
            
            /* 聖盃佈局 */
            padding-left: 200px;
            padding-right: 300px; 
        }

        .container div{
            float: left;
            
            /* 聖盃佈局 */
            position:relative;
        }

        .left {
            width: 200px;
            height: 300px;
            background-color: #DC698A;

            margin-left: -100%;
            /* 聖盃佈局 */
            left:-200px;
        }

        .middle {
            width: 100%;
            height: 300px;
            background-color: #3EACDD;

        }

        .right {
            width: 300px;
            height: 300px;
            background-color: #8CB08B;
    

            margin-left: -300px;
            /* 聖盃佈局 */
            right:-300px;
        }
    </style>
</head>

<body>
    <header>頭部</header>
    <div class="container">
        <div class="middle">中間欄：內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容</div>
        <div class="left">左欄</div>
        <div class="right">右欄</div>
    </div>
    <footer>底部</footer>
</body>

</html>
複製程式碼

2.2用flex實現聖盃佈局

實現方式：

(1)holyGrail啟用flex佈局，設定holyGrail中的header、container、footer在交叉軸上豎向排列（flex-direction:column;）

(2)container中的三欄佈局：container啟用flex佈局，設定container中的middle、left、right在主軸上橫向排列（flex-direction:row，預設值可以不設）。由於html中先寫的middle，所以為了讓left在最左邊，要設定left的order為這三欄中最小的，即-1（其他兩欄order為預設值0）

可以看出Flex佈局的實現方式更加簡單，也更加直觀。

實現效果：同上

實現程式碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>聖盃佈局--flex</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }
        .holyGrail{
            display: flex;
            flex-direction: column;
        }
        header,
        footer {
            height: 100px;
            width: 100%;
            background-color: #bbbbbb;

            flex: 1; /*flex:1; === flex:1 1 auto;*/
        }

        .container {
            height: 300px;
            
            display: flex;
            flex-direction: row;/*可不寫，預設值*/
            flex:1;/*需要可自動擴充套件*/
        }


        .left {
            width: 200px;
            height: 300px;
            background-color: #DC698A;

            order:-1;/*左邊欄放到最左邊*/
        }

        .middle {
            width: 100%;
            height: 300px;
            background-color: #3EACDD;

            flex:1;
        }

        .right {
            width: 300px;
            height: 300px;
            background-color: #8CB08B;
        }
    </style>
</head>

<body class="holyGrail">
    <header>頭部</header>
    <div class="container">
        <div class="middle">中間欄：內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容</div>
        <div class="left">左欄</div>
        <div class="right">右欄</div>
    </div>
    <footer>底部</footer>
</body>

</html>
複製程式碼

三.固定欄-可擴充套件欄頁面佈局

實現效果：

img

實現程式碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>flex</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }

        .container {
            width: 300px;
            height: 200px;
            border: 1px solid blue;

            display: flex;
            flex-direction: column;
        }

        .nav {
            height: 50px;
            background-color: grey;

            display: flex;
            flex-direction: row;
        }

        .nav-item {
            min-width: 60px;
            border: 1px solid orangered;
        }

        .main {
            display: flex;
            flex-direction: row;
            flex: 1;
            /*main區域需要自動擴充套件*/
        }

        .main-left {
            width: 100px;
            /*main中的left區域固定*/
            background-color: #DC698A;
        }

        .main-right {
            background-color: #3EACDD;
            flex: 1;
            /*main中的right區域需要自動擴充套件*/
        }
    </style>
    <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>

<body>
    <div class="container">
        <div class="nav">
            <div class="nav-item">nav1</div>
            <div class="nav-item">nav2</div>
            <div class="nav-item">nav3</div>
        </div>
        <div class="main">
            <div class="main-left">固定欄：內容內容內容內容內容內容內容內容內容內容</div>
            <div class="main-right">可擴充套件欄：內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容</div>
        </div>
    </div>
</body>
<script type="text/javascript">
    (function run() {
        $(".container").animate({ width: 500, height: 300 }, 1500,
            () => {
                $(".container").animate({ width: 300, height: 200 }, 1500, run)
            }
        )
    }());
</script>

</html>
複製程式碼

四.小結

本文主要提供了三個例項，來實際應用下flex的屬性。通過對比其他的實現方式，可以看出使用Flex佈局可以優雅地實現相同的CSS佈局問題。如有問題，歡迎指正。

此文已由作者授權騰訊雲+社群釋出

搜尋關注公眾號「雲加社群」，第一時間獲取技術乾貨，關注後回覆1024 送你一份技術課程大禮包！

相關文章