CSS實例詳解：Flex佈局

時間 2019-11-05

標籤 css 實例詳解 flex 佈局欄目 CSS 简体版

原文原文鏈接

本文由雲+社區發表

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

一．垂直居中

這裏同時用非flex佈局和flex佈局兩種方式來實現，能夠對比兩種實現方式的差別。css

1.1用margin實現垂直居中

實現方式：html

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

實現效果：jquery

附上完整代碼：佈局

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

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

實現效果：同上code

附上完整代碼：orm

<!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設爲-右欄寬度。

實現效果：

實現代碼：

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

三.固定欄-可擴展欄頁面佈局

實現效果：

實現代碼：

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