CSS布局 0x8 flexbox

最新推荐文章于 2024-08-26 10:00:00 发布

原创最新推荐文章于 2024-08-26 10:00:00 发布 · 171 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #CSS布局 #flexbox #垂直居中布局

前端基础同时被 2 个专栏收录

167 篇文章

订阅专栏

CSS

29 篇文章

订阅专栏

本文深入探讨了CSS Flexbox布局的多种应用场景，包括简单布局、高级布局和居中布局，展示了如何利用Flexbox轻松实现响应式网页设计。通过具体实例，讲解了不同属性设置下元素的排列方式和空间分配策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用 Flexbox 的简单布局

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>flexbox</title>
        <style>
            .container{
                display: -webkit-flex;
                display: flex;
            }
            nav {
                width:200px;
                border: solid red 1px;
            }
            .flex-colum{
                -webkit-flex:1;
                flex: 1;
            }
            section {
                border: solid yellowgreen 1px;
            }
            div {
                border: solid green 1px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <nav>
                <ul>
                    <li><a href="#">aaa</a></li>
                    <li><a href="#">aaa</a></li>
                    <li><a href="#">aaa</a></li>
                    <li><a href="#">aaa</a></li>
                    <li><a href="#">aaa</a></li>
                    <li><a href="#">aaa</a></li>
                </ul>
            </nav>
            <div class="flex-column">
                <section>
                        Flexbox好容易使用！
                </section>
                <section>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
                </section>
            </div>
        </div>
    </body>
</html>

使用 Flexbox 的高级布局

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>flexbox</title>
        <style>
            .container {
                display: -webkit-flex;
                display: flex;
            }
            .initial {
                -webkit-flex:initial;
                flex:initial;
                width: 200px;
                min-width: 100px;
            }
            .none {
                -webkit-flex:none;
                flex:none;
                width:200px;
            }
            .flex1 {
                -webkit-flex:1;
                flex: 1;
            }
            .flex2 {
                -webkit-flex:2;
                flex: 2;
            }
            div {
                border:solid greenyellow 1px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="initial">空间足够的时候，我的宽度是200px，如果空间不足，我会变窄到100px，但不会再窄了。</div>
            <div class="none">无论窗口如何变化，我的宽度一直是200px。</div>
            <div class="flex1">我会占满剩余宽度的1/3。</div>
            <div class="flex2">我会占满剩余宽度的2/3。</div>
        </div>
    </body>
</html>

使用 Flexbox 的居中布局

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>flexbox居中布局</title>
        <style>
            .vertical-container {
                height: 300px;
                display: -webkit-flex;
                display: flex;
                -webkit-align-items:center;
                align-items: center;
                -webkit-justify-content:center;
                justify-content: center;
            }
            div {
                border: solid red 1px;
            }
        </style>
    </head>
    <div class="vertical-container">
        <div>CSS里总算是有了一种简单的垂直居中布局的方法了！</div>
    </div>
</html>