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

最新推荐文章于 2024-09-14 13:04:57 发布

fongdaBoy

最新推荐文章于 2024-09-14 13:04:57 发布

阅读量1k

点赞数 1

分类专栏： Css

本文链接：https://blog.csdn.net/iceking66/article/details/78143622

版权

Css 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

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>