Flexbox盒子弹性布局

Posted 2020-07-31

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Flexbox盒子弹性布局相关的知识，希望对你有一定的参考价值。

Can I Use?

2. 概念:

当你给一个元素使用了flexbox模块，那么它的子元素就会指定的方向在水平或者纵向方向排列。这些子元素会按照一定的比例进行扩展或收缩来填补容器的可用空间。

<html>

<head>
    <title></title>
    <meta charset="utf-8">
    <style>
    ul {
        /* display: flex; */
        display:-webkit-box;
        width: 50%;
        margin: 0 auto;
        border:1px solid #ccc;
    }
    
    li {
        padding: 5px 0;
        list-style: none;
       /*  flex: 1;    *表示子元素之间平均分配 */
        -webkit-box-flex: 1; /* 兼容性写法 */
        text-align: center;
    }

    ul li:first-child{
        border-right: 1px solid #ccc;
    }
    </style>
</head>

<body>
    <ul>
        <li>区域1</li>
        <li>区域2</li>
    </ul>
</body>
</html>

3.flex 不等宽布局

<html>

<head>
    <title></title>
    <meta charset="utf-8">
    <style>
        .container{
            display:flex;
            display:-webkit-flex;

        }

        .container section{
            border: 1px solid #bc223d;
        }

        .initial{
            flex:initial;
            -webkit-flex:initial;
            width: 200px;
            min-width: 100px;
        }

        .none{
            flex:none;
            -webkit-flex:none;
            width: 200px;
        }

        .flex1{
            flex:1;
            -webkit-flex:1;
        }

        .flex2{
            flex:2;
            -webkit-flex:2;
        }
    </style>
</head>
<body>
    <section class="container">
        <section class="initial">
            <p>啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦</p>
        </section>
        <section class="none">
            <p>啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦</p>
        </section>
        <section class="flex1">
            <p>啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦</p>
        </section>
        <section class="flex2">
            <p>啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦</p>
        </section>
    </section>
</body>
</html>

4.居中布局

<html>

<head>
    <title></title>
    <meta charset="utf-8">
    <style>
        .container{
            display:flex;
            display:-webkit-flex;
            border:2px solid #bc223d;
            width: 500px;
            height: 250px;
        }

        .content{
            border:1px solid #ccc;
            background: #bc223d;
            width:100px;
            height:50px;
            margin: auto;
        }
    </style>
</head>
<body>
    <section class="container">
        <section class="content"></section>
    </section>
</body>
</html>

5.属性详解

box-align: start|end|center|baseline|stretch(子元素拉伸撑满)

定位子元素,纵向位置

box-pack: start|end|center|justify

规定当框大于子元素尺寸的时候,如何放置子元素,规定了水平框中的水平位置,垂直框中的垂直位置

box-direction:normal|reserve(反向)|inherit

规定子元素排列的方向

以上是关于Flexbox盒子弹性布局的主要内容，如果未能解决你的问题，请参考以下文章