master

分支 (1)

管理

管理

master

front-end-lian-xi
/
83.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹性盒子练习一</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    body {
        display: flex;
        flex-direction: column;
    }

    div {
        border: none;

    }

    #main {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
        width: 400px;
        height: 400px;
        background-color: pink;
    }

    .son {
        width: 194px;
        height: 194px;
        background-color: black;
    }
</style>
<div id="main">
    <div class="son" style="flex:1">1</div>
    <div class="son" style="flex:1">2</div>
    <div class="son" style="flex:2">3</div>
    <div class="son" style="flex:2">4</div>
</div>

<body>

</body>

</html>