弹性盒子模型display:flex

1.div上下左右居中

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>弹性盒子模型flex:1</title>

    <style type="text/css">

        * {

            margin: 0;

            padding: 0

        }

        h3{ text-align: center}

        .main{ width: 600px; overflow: hidden;background-color: aquamarine; margin: 0 auto; color: #fff;

        display: -webkit-flex; /* Safari ,Webkit内核的浏览器，必须加上-webkit前缀。*/

        display: flex;}

        .main .left,.main .right{

            border:1px solid red;

            height: 200px;

            text-align: center;

            line-height: 200px;

        }

        .left{ flex:1; background-color: blue;}

        .right{ flex:1; background-color: blueviolet;}

    </style>

</head>

<body>

    <h3>父级元素定义display:flex,子元素宽度用flex来定义,flex:1 是均分父级元素。占的比例相同</h3>

    <div class="main">

        <div class="left">左侧区域</div>

        <div class="right">右侧区域</div>

    </div>

</body>

</html>

效果图：

2.display: -webkit-flex; /* Safari ,Webkit内核的浏览器，必须加上-webkit前缀。*/

1）1:1分时比例相同：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>弹性盒子模型flex:1</title>

    <style type="text/css">

        * {

            margin: 0;

            padding: 0

        }

        .main{ width: 600px; overflow: hidden;background-color: aquamarine; margin: 0 auto; display: flex; color: #fff;}

        .main .left,.main .right{

            border:1px solid red;

            height: 200px;

            text-align: center;

            line-height: 200px;

        }

        .left{ flex:1; background-color: blue;}

        .right{ flex:1; background-color: blueviolet;}

        h3{ text-align: center}

    </style>

</head>

<body>

    <h3>父级元素定义display:flex,子元素宽度用flex来定义,flex:1 是均分父级元素。占的比例相同</h3>

    <div class="main">

        <div class="left">左侧区域</div>

        <div class="right">右侧区域</div>

    </div>

</body>

</html>

效果图：

2)1:2分时，同上面的代码，只需要改：

.right{ flex:2; background-color: blueviolet;}

3）1:2:1分时，同上代码只需要修改：

.left{ flex:1; background-color: blue;}

.right{ flex:1; background-color: blueviolet;}

.middle{flex:2; background-color: rgb(189, 72, 164);}

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>弹性盒子模型display:flex</title>

    <style type="text/css">

        * {

            margin: 0;

            padding: 0

        }

        .m_box {

            width: 600px;

            margin: 0 auto;

            overflow: hidden;

            background-color: aquamarine;

            display: flex;

            display: -webkit-box;

        }

        .m_b {

            width: 50px;

            height: 50px;

            background-color: rgb(235, 181, 34);

            box-sizing: border-box;

            border: 1px solid red;

        }

    </style>

</head>

<body>

    <div class="m_box">

        <div class="m_b">1</div>

        <div class="m_b">2</div>

        <div class="m_b">3</div>

    </div>

</body>

</html>

效果图：

原链接：

https://blog.csdn.net/weixin_36401046/article/details/53127019

巴特西

弹性盒子模型display:flex

最新文章

热门文章