CSS3 FLEX 彈性盒模型讓佈局飛起來-2 -cyy

時間 2020-11-16

標籤 css html 佈局 post flex 網站 this spa code htm 欄目 CSS 简体版

原文原文鏈接

佈局小米移動端頁面結構：css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="關鍵詞1，關鍵詞2，關鍵詞3">
    <meta name="description" content="網站描述bla bla">
    <title>網站標題</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            display:flex;
            flex-direction: column;
            height:100vh;
        }
        header{
            height:60px;
            background:lightblue;
        }
        main{
            height:100px;
            background:pink;
            flex-grow:1;
        }
        footer{
            height:60px;
            background:#ddd;
        }
    </style>
</head>
<body>
    <header></header>
    <main></main>
    <footer></footer>
</body>
</html>

元素動態縮小的處理技巧：html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="關鍵詞1，關鍵詞2，關鍵詞3">
    <meta name="description" content="網站描述bla bla">
    <title>網站標題</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        article{
            display:flex;
        }
        article div{
            background:lightblue;
            border:1px solid lightblue;
            padding:10px;
            background-clip:content-box;
            width:120px;
            height:120px;
        }
        /* flex-shrink 空間不足時的縮小比例，設置爲0表示不縮小 */
        article div:nth-child(1){
            flex-shrink:0;
        }
        article div:nth-child(2){
            flex-shrink:1;
        }
        article div:nth-child(3){
            flex-shrink:2;
        }
    </style>
</head>
<body>
    <article>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </article>
</body>
</html>

主軸的基準尺寸的定義：佈局

flex-basis 指定了 flex 元素在主軸方向上的初始大小post

若是flex-direction是row，則主軸的基準尺寸可覆蓋width；flex

若是flex-direction是column，則主軸的基準尺寸可覆蓋height；網站

做用能夠參考這篇：https://juejin.im/post/6844904152238129165this

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="關鍵詞1，關鍵詞2，關鍵詞3">
    <meta name="description" content="網站描述bla bla">
    <title>網站標題</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        article{
            display:flex;
        }
        article div{
            background:lightblue;
            border:1px solid lightblue;
            padding:10px;
            background-clip:content-box;
            width:120px;
            height:120px;
            flex-basis:100px;
        }
    </style>
</head>
<body>
    <article>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </article>
</body>
</html>

彈性元素組規則和定義：spa

flex-grow+flex-shrink+flex-basis可簡寫爲flexcode

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="關鍵詞1，關鍵詞2，關鍵詞3">
    <meta name="description" content="網站描述bla bla">
    <title>網站標題</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        article{
            display:flex;
        }
        article div{
            background:lightblue;
            border:1px solid lightblue;
            padding:10px;
            background-clip:content-box;
            width:120px;
            height:120px;
            flex-grow:1;
            flex-shrink:2;
            flex-basis:100px;
            /* 簡寫形式 */
            flex:1 2 100px;
            /* 都不縮放的狀況下，會溢出 */
            flex:1 0 150px;
        }
    </style>
</head>
<body>
    <article>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </article>
</body>
</html>

也能夠單獨進行調整：htm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="關鍵詞1，關鍵詞2，關鍵詞3">
    <meta name="description" content="網站描述bla bla">
    <title>網站標題</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        article{
            display:flex;
        }
        article div{
            background:lightblue;
            border:1px solid lightblue;
            padding:10px;
            background-clip:content-box;
            width:120px;
            height:120px;
        }
        article div:nth-child(1){
            flex: 1 0 150px;
        }
        article div:nth-child(2){
            flex: 1 2 150px;
        }
        article div:nth-child(3){
            flex: 1 1 150px;
        }
    </style>
</head>
<body>
    <article>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </article>
</body>
</html>

控制彈性元素的排序：

數字越大越日後，可負數，越負越往前

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="關鍵詞1，關鍵詞2，關鍵詞3">
    <meta name="description" content="網站描述bla bla">
    <title>網站標題</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        article{
            display:flex;
        }
        article div{
            background:lightblue;
            border:1px solid lightblue;
            padding:10px;
            background-clip:content-box;
            width:120px;
            height:120px;
        }
        article div:nth-child(1){
            order:2;
        }
        article div:nth-child(2){
            order:3;
        }
        article div:nth-child(3){
            order:-1;
        }
    </style>
</head>
<body>
    <article>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </article>
</body>
</html>

彈性元素排序實例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="關鍵詞1，關鍵詞2，關鍵詞3">
    <meta name="description" content="網站描述bla bla">
    <title>網站標題</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        article{
            display:flex;
            flex-direction:column;
            height:100vh;
        }
        article section{
            background:lightblue;
            border:1px solid lightblue;
            padding:10px;
            background-clip:content-box;
            flex:1 0 100px;
            text-align:center;

            display:flex;
            flex-direction:column;

        }
        article section div{
            flex:1;

            display:flex;
            flex-direction:column;
            justify-content:center;
        }
        article section span{
            padding:10px;
            background:pink;
            cursor:pointer;
        }
    </style>
</head>
<body>
    <article>
        <section>
            <div>項目1</div>
            <span onclick="up(this)">up</span>
        </section>
        <section>
            <div>項目2</div>
            <span onclick="up(this)">up</span>
        </section>
        <section>
            <div>項目3</div>
            <span onclick="up(this)">up</span>
        </section>
    </article>

    <script>
        function up(el){
            let order = getComputedStyle(el.parentElement,null).order;
            el.parentElement.style.order = order*1 - 1; // 點擊up讓元素的order-1
            console.log(order);
        }
    </script>
</body>
</html>

彈性佈局操做文本節點：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="關鍵詞1，關鍵詞2，關鍵詞3">
    <meta name="description" content="網站描述bla bla">
    <title>網站標題</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        article{
            display:flex;
            height:100vh;
            justify-content:space-between;
            align-items:center;
        }
    </style>
</head>
<body>
    <article>
        這是文本
        <div>這是div</div>
        這是文本
    </article>

</body>
</html>

多級菜單的彈性佈局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="關鍵詞1，關鍵詞2，關鍵詞3">
    <meta name="description" content="網站描述bla bla">
    <title>網站標題</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            height:100vh;
            display:flex;
            flex-direction:column;
        }
        header{
            height:60px;
            background:pink;
        }
        main{
            flex:1;
            background:lightblue;
        }
        footer{
            height:50px;
            background:#ddd;
            border-top:1px solid #eee;

            display:flex;
            justify-content:space-between;
        }
        footer section{
            flex:1;
            border-right:1px solid #eee;

            display:flex;
            flex-direction:column-reverse;
            
        }
        footer section:last-child{
            border-right:none;
        }
        footer section h4{
            flex:0 0 50px;
            cursor:pointer;

            display:flex;
            flex-direction:column;
            justify-content:center;
            align-items:center;
        }
        footer section ul{
            display:flex;
            flex-direction:column;
            border:1px solid #eee;
            margin-bottom:5px;
            text-align:center;
        }
        footer section ul li{
            height:50px;
            line-height:50px;
            border-bottom:1px solid #eee;
            cursor:pointer;
            background:#ddd;
        }
        footer section ul li:last-child{
            border-bottom:none;
        }
    </style>
</head>
<body>
    <header></header>
    <main></main>
    <footer>
        <section>
            <h4>教程</h4>
            <ul>
                <li>html</li>
                <li>css</li>
                <li>js</li>
            </ul>
        </section>
        <section>
            <h4>直播</h4>
        </section>
        <section>
            <h4>軟件</h4>
        </section>
    </footer>

</body>
</html>

使用margin自動撐滿空間的技巧：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="關鍵詞1，關鍵詞2，關鍵詞3">
    <meta name="description" content="網站描述bla bla">
    <title>網站標題</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        nav{
            width:1200px;
            height:60px;
            background:#ddd;
            box-shadow:0 0 0 rgba(0,0,0,.2);
            margin:0 auto;
            display:flex;
        }
        ul{
            list-style:none;
            display:flex;
            align-items:center;
        }
        ul:first-of-type{
            /* 上下兩句能夠起到相同的效果 */
            margin-right:auto;
            /* flex:1; */
        }
        ul:first-of-type>li{
            margin:0 50px;
        }
        ul:nth-of-type(2) li{
            border-radius:50%;
            width:30px;
            height:30px;
            background:pink;
        }

    </style>
</head>
<body>
    <nav>
        <ul>
            <li>li</li>
            <li>li</li>
            <li>li</li>
        </ul>
        <ul>
            <li></li>
        </ul>
    </nav>

</body>
</html>