Flex弹性盒模型初尝试

最新推荐文章于 2021-10-18 16:44:24 发布

稳稳DE幸福

最新推荐文章于 2021-10-18 16:44:24 发布

阅读量216

点赞数

本文链接：https://blog.csdn.net/gouhuarong/article/details/51815967

版权

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <!--<link rel="stylesheet" href="global.css"/>-->
    <style>
        .div3{
            width: 1000px;
            height: 1000px;
            /*声明弹性盒模型*/
            display: flex;
            margin-top: 50px;
            outline: 1px solid skyblue;
            /*声明项目的方向 row从左往右水平方向；*/
            flex-direction: row;
            /*row-reverse从右到左水平方向*/
            /*flex-direction: row-reverse;*/
            /*column从上到下垂直方向*/
            /*flex-direction: column;*/
            /*column-reverse从上到下垂直方向*/
            /*flex-direction: column-reverse;*/
            /*justify-content声明子集对齐方式 center从中间开始对齐*/
            /*justify-content: center;*/
            /*flex-start 子集对齐方式为主轴线开始对齐*/
            /*justify-content: flex-start;*/
            /*flex-start 子集对齐方式为右对齐*/
            /*justify-content: flex-end;*/
            /*flex-start 子集对齐方式为两端对齐，中间间距一致*/
            /*justify-content: space-between;*/
            /*space-around子集对齐方式为左右两边间距一致*/
            justify-content: space-around;
        }
        .one{
            width: 100px;
            height: 100px;
            background-color: green;
        }
        .two{
            width: 200px;
            height: 100px;
            background-color: #b1ff44;
        }
        .three{
            width: 100px;
            height: 50px;
            background-color: #fff08f;
        }
        .four{
            width: 200px;
            height: 300px;
            background-color: #ef991f;
        }
    </style>
</head>
<body>
    <div class="div3">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
        <div class="four"></div>
    </div>
</body>
</html>