HTML/CSS -- 利用flexBox布局

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/wust_cyl/article/details/85311269

语法规则可参考：RYF

布局1：高度固定，左宽度已知，右边适应

    <section>
        <style>
            .part2-content-wrap{
                display: flex;
                height: 100px;
            }
            .part2-content-left{
                width: 300px;
                background: red;
            }
            .part2-content-right{
                flex: 1;
                background: yellow;
                text-align: center;
            }
        </style>
        <article>
            <div class = "part2-content-wrap">
                <div class = "part2-content-left"></div>
                <div class = "part2-content-right">
                    <h1>利用flexbox布局</h1>
                    <p>高度固定，左宽度已知，右边适应</p>
                </div>
            </div>
        </article>
    </section>

同理可以实现，高度固定，右宽度已知，左边适应

布局2：高度固定，左右宽度已知，中间自适应

    <section>
        <style>
            .part1-content-wrap{
                display: flex;
                flex-wrap: nowrap;
                height: 100px;
            }
            .part1-content-left{
                 width: 300px;
                 background: red;
            }
            .part1-content-center{
                 flex: 1;
                 background: green;
                 text-align: center;
            }
            .part1-content-right{
                 width: 300px;
                 background: yellow;
            }
        </style>
        <article>
            <div class = "part1-content-wrap">
                <div class = "part1-content-left"></div>
                <div class = "part1-content-center">
                    <h1>利用flexbox布局</h1>
                    <p>高度固定，左右宽度已知，中间自适应</p>
                </div>
                <div class = "part1-content-right"></div>
            </div>
        </article>
    </section>

布局3：宽度已知，上下高度固定，中间自适应

    <style>
        .content-wrap{
            display: flex;
            flex-direction: column;
            width: 300px;
            height: 100%;
        }
        .content-top{
            height: 100px;
            background: red;
        }
        .content-center{
            flex: 1;
            background: yellow;
            text-align: center;
        }
        .content-bottom{
            height: 100px;
            background: green;
        }
    </style>
    <div class  = "content-wrap">
        <div class = "content-top"></div>
        <div class = "content-center">
            <h1>利用flexBox布局</h1>
            <p>宽度已知，上下高度固定，中间自适应</p>
        </div>
        <div class  = "content-bottom"></div>
    </div>

flex是css3推出的布局方法，功能非常强大，缺点是对老版浏览器不友好。

flex布局的强大远不止上面的简单布局，我们可以通过骰子布局来熟悉。

譬如这样的：

    <style>
        .content-wrap{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            width: 300px;
            height: 300px;
            border: 1px solid gray;
        }
        .item {
           width: 100px;
           height: 100px;
           border-radius: 50px;
           background: black;
        }
    </style>
    <div class  = "content-wrap">
        <div class ="item"></div>
        <div class ="item"></div>
    </div>

    <style>
        .content-wrap{
            display: flex;
            flex-direction: column;
            
            
            width: 300px;
            height: 300px;
            border: 1px solid gray;
        }
        .item {
           width: 100px;
           height: 100px;
           border-radius: 50px;
           background: black;
        }
        .item:nth-child(2) {
            align-self: center;
        }
    </style>
    <div class  = "content-wrap">
        <div class ="item"></div>
        <div class ="item"></div>
    </div>

我们可以把各种各样的都尝试一下，这样就能熟悉flexBox布局