淘先锋技术网

首页 1 2 3 4 5 6 7

Flexbox盒子弹性布局

  1. Can I Use?

image

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.属性详解

image

 

  • box-align: start|end|center|baseline|stretch(子元素拉伸撑满)
    • 定位子元素,纵向位置
  • box-pack: start|end|center|justify
    • 规定当框大于子元素尺寸的时候,如何放置子元素,规定了水平框中的水平位置,垂直框中的垂直位置
  • box-direction:normal|reserve(反向)|inherit
    • 规定子元素排列的方向

转载于:https://www.cnblogs.com/winyou/p/5626259.html