CSS-flex|gird 布局

网页布局.css

*{
    box-sizing: border-box;
}
/* flex弹性布局 */
#flex-container {
    display: flex;
    flex-direction: row;
    border: 3px solid red;
  }
  
#flex-container > .flex-item {
    flex: auto;
    border: 1px solid green;
}

#flex-container > .raw-item {
    width: 5rem;
}


/* https://developer.mozilla.org/zh-CN/docs/Glossary/Grid */
/* grid网格布局 */
.wrapper{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 100px 100px;
    border: 2px solid #f76707;
    border-radius: 5px;
    background-color: #fff4e6;
}

.wrapper > div{
    border: 2px solid #ffa94d;
    border-radius: 5px;
    background-color: #ffd8a8;
    padding: 1em;
    color: #d9480f;
}

/* 媒体查询 */
/* https://www.w3cschool.cn/css3/css3-mediaqueries.html */
/* https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media */
@media screen and (min-width: 480px) {
    /* 屏幕尺寸小480px时背景色变化 */
    body {
        background-color: lightgreen;
    }
}

html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页布局-Flex</title>
    <link rel="stylesheet" href="./网页布局.css">
</head>
<body>
    <!-- flex弹性布局 -->
    <div id="flex-container">
        <div class="flex-item" id="flex">Flex box (click to toggle raw box)</div>
        <div class="raw-item" id="raw">Raw box</div>
    </div>

    <!-- grid网格布局 -->
    <div class="wrapper">
        <div>One</div>
        <div>Two</div>
        <div>Three</div>
        <div>Four</div>
        <div>Five</div>
        <div>Six</div>
        <div>Seven</div>
        <div>Eight</div>
     </div>
</body>
</html>

猜你喜欢