flex响应式布局简单demo

在这里插入图片描述
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>

<body>
    <style>
        .demo1 {
    
    
            width: 100%;
            height: 20vh;/*vh等同于%，又不同于%，vh是相对当前屏幕*/
            border: 1px solid purple;
            display: flex; /*设置为flex布局*/
            justify-content: center; /*水平居中*/
            align-items: center; /*垂直居中*/
        }
        .demo2 {
    
    
            height: 56vh; /*calc(100vh - 430px) ;*/
            display: flex;
            align-items: center; 
            justify-content: center; 
        }
        .demo3 {
    
    
            width: 40%;
            height: 100%;
            border: 1px solid purple;
            display: flex; 
            justify-content: center; 
            align-items: center;
        }
        .demo4 {
    
    
            width: 60%;
            height: 100%;
            border: 1px solid purple;
            display: flex;
            justify-content: center; 
            align-items: center;
        }
        .unionDEmo {
    
    
            width: 100%;
            height: 20vh;
            border: 1px solid purple;
            display: flex; 
        }
        .demo5 {
    
    
            width: 40%;
            height: 100%;
            display: flex; 
            align-items: center;
            justify-content: center;
            border: 1px solid purple;
        }

        ul {
    
    
            display: flex;
        }

        li {
    
    
            flex: 1;
            text-align: center;
            background-color: aqua;
            line-height: 100px;
        }
    </style>
    <div class="demo1">
        <p>这是一个顶部</p>
    </div>
    <div class="demo2">
        <p  class="demo5">这是一个内容</p>
    </div>
    <div class="unionDEmo">
        <div class="demo3">
            <p>这是一个百分之40</p>
        </div>
        <div class="demo4">
            <p>这是一个百分之60</p>
        </div>
    </div>
</body>
</html>
flex响应式布局简单demo

猜你喜欢
