flex 运用跟兼容写法

最新推荐文章于 2024-08-24 09:46:30 发布

zhuhongjin0610

最新推荐文章于 2024-08-24 09:46:30 发布

阅读量7.7k

点赞数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

    <title></title>
    <style>
        .flex-parent {
            /*设置父元素为伸缩容器*/
            display: -webkit-box; /*老版本：iOS 6-, Safari 3.1-6*/
            display: -webkit-flex; /*新版本：Chrome*/
            display: flex; /*标准规范：Opera 12.1, Firefox 20+*/

            /*设置父元素内部的伸缩子元素项目换行规则：水平排列（row）不换行（nowrap）*/
            -webkit-box-orient: horizontal; /*老版本：iOS 6-, Safari 3.1-6*/
            -webkit-flex-flow: row nowrap; /*新版本：Chrome*/
            flex-flow: row nowrap; /*标准规范：Opera 12.1, Firefox 20+*/
        }

        .flex-son {
            /*设置子元素伸缩项目的伸缩比例*/
            -webkit-box-flex: 1; /*老版本：iOS 6-, Safari 3.1-6*/
            -webkit-flex: 1; /*新版本：Chrome*/
            flex: 1; /*标准规范：Opera 12.1, Firefox 20+*/

            /*此处无需设置宽度，因为flexbox会自动伸缩*/
            height: 2rem;
            margin: 0 0.5rem;
            background: #000;
        }
    </style>
</head>

<body>

<div class="flex-parent">
    <div class="flex-son"></div>
    <div class="flex-son"></div>
    <div class="flex-son"></div>
</div>

</body>
</html>