flex布局

flex结构

<!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="css01.css">
</head>
<body>
    <header>页眉</header>
    <div class="container">
        <aside>左侧</aside>
        <main>内容区</main>
        <aside>右侧</aside>
    </div>
    <footer>页脚</footer>
</body>
</html>

   /* 从body的所有后代匹配的元素中,去掉某些元素 */
   body *:not(.container) {
    background-color: lightgreen;
}
header,
footer {
    height: 8vh;
}
/* 100vh - 8vh - 8vh = 84vh */
.container {
    height: 84vh;
    /* 中间主体用felx弹性盒布局实现 */
    display: flex;
}
.container aside {
    min-width: 15em;
}
.container main {
    min-width: calc(100% - 30em);
    margin: 0 0.5em;
}
.container {
    margin: 0.5em 0;
    height: calc(84vh - 1em);
}
.container main {
    min-width: calc(100% - 30em - 1em);
}

grid结构

        body {
            height: 100vh;
            display: grid;
            grid-template-columns: 15em 1fr 15em;
            grid-template-rows: 8vh 1fr 8vh;
            gap: 0.5em;
        }
        header,
        footer {
            grid-column: span 3;
        }
        body>* {
            background-color: lightgreen;
        }

任何元素都可以通过添加display: flex属性,转为弹性盒元素
转为flex元素后,它的内部的”子元素”就支持flex布局了
使用了display: flex属性的元素称为: flex容器
flex容器中的”子元素”称之为: flex项目
容器中的项目自动转为”行内块元素”(不管之前是什么类型)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹性容器与弹性项目</title>
    <style>
        * {
            box-sizing: border-box;
        }
        .container {
            /* 转为flex弹性布局元素 */
            display: flex;
            height: 15em;
            border: 1px solid #000;
            padding: 1em;
            margin: 1em;
        }
        .container>.item {
            height: 2em;
            width: 5em;
            background-color: lightcyan;
            border: 1px solid #000;
        }
        /* 
        1. 任何元素都可以通过添加display: flex属性,转为弹性盒元素
        2. 转为flex元素后,它的内部的"子元素"就支持flex布局了
        3. 使用了display: flex属性的元素称为: flex容器
        4. flex容器中的"子元素"称之为: flex项目
        5. 容器中的项目自动转为"行内块元素"(不管之前是什么类型) */
        .container>.item:nth-child(4) {
            display: flex;
        }
        .container>.item:nth-child(4)>div {
            background-color: yellow;
            border: 1px solid #000;
        }
        /* 工作中会存在大量的flex容器的嵌套布局 */
    </style>
</head>
<body>
    <div class="container">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
        <div class="item">item4
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </div>
    </div>
</body>
</html>