display:flex;Flex布局常用的属性

来源：互联网发布：淘宝账户暂时被冻结编辑：程序博客网时间：2024/04/28 17:25

display:flex;Flex布局常用的属性

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport"          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>Flex布局</title>    <style>        *{            margin:0;            padding: 0;        }        .box{            height: 300px;            width: 100%;            background: #7f8c8d;            display: -webkit-flex; /* Safari */            display: flex;            /*flex-wrap: nowrap;*/  /*不换行默认*/            flex-wrap: wrap;    /*自动换行*/            /*justify-content:center; !*水平居中*!*/            /*justify-content:flex-end; !*水平往右边对齐*!*/            /*justify-content:flex-start; !*水平往左边对齐*!*/            /*justify-content:space-around;*/ /*环绕对齐*/            /*justify-content:space-between; !*往两边对齐*!*/            /*align-items: center;    !*垂直居中*!*/            /*align-items: flex-start; !*垂直往上对齐*!*/            /*align-items: flex-end;  !*垂直往下对齐*!*/            /*flex-direction: column;     !*垂直对齐*!*/            /*flex-direction: row;       !*水平对齐*!*/        }        .box1{            width: 50px;        }        .box2{            width:100px;        }        .box3{            /*flex: auto;*/            flex:1;            /*flex:0.5;*/            /*width: 200px;*/        }    </style></head><body>    <div class="box">        <div class="box1" style="background: white;">box1</div>        <div class="box2" style="background: red">box2</div>        <div class="box3" style="background: yellowgreen">box3</div>    </div></body></html>

阅读全文

1 0