Flex弹性盒模型初尝试

来源：互联网发布：金九银十数据编辑：程序博客网时间：2024/06/14 23:30
<!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>
0 0