CSS第四章 布局

4. CSS布局

4.1 弹性布局

主流布局方式，市场使用率高

---

• 浮动布局存在的问题
  1. 很难合理的实现元素在垂直方向的居中
  2. 使用 margin-top 设置上外边距是可以实现的，但是元素占用的位置发生变化，导致不能写在外边距占用的位置
  3. 当屏幕或设备发生变化时，使用外边距设置的值是固定的，不能达到自适应的的结果

• 父容器（flex-container ）常见属性

属性	作用	常用取值
display	开启弹性布局	flex（块级弹性容器）、inline-flex（行内弹性容器）
flex-direction	主轴方向	row 默认横向、row-reverse反向横向、column纵向、column-reverse反向纵向
flex-wrap	是否自动换行	nowrap不换行、wrap自动换行、wrap-reverse反向换行
flex-flow	简写：flex-direction + flex-wrap	flex-flow: row wrap;
justify-content	主轴对齐方式	flex-start起点、flex-end终点、center居中、space-between两端均分、space-around两侧留白均分、space-evenly完全等分
align-items	交叉轴单行对齐	stretch默认拉伸、flex-start、flex-end、center、baseline基线对齐
align-content	交叉轴多行对齐（只有换行 flex-wrap:wrap 才生效）	stretch、flex-start、flex-end、center、space-between、space-around

• 子元素（flex-item）属性

属性	作用	常用取值
flex-grow	剩余空间放大比例 ，默认0	数字，0 不放大；1 均分剩余空间
flex-shrink	空间不足缩小比例 ，默认1	0禁止缩小，数字越大缩得越多
flex-basis	项目基础尺寸（主轴方向）	auto、像素200px、百分比，优先级高于 width
flex	简写 flex-grow flex-shrink flex-basis	flex:1 → 1 1 0%；flex:0 0 150px固定宽度不伸缩
align-self	单独控制当前项目交叉轴对齐，覆盖父align-items	auto、stretch、center、flex-start、flex-end
order	控制子元素排列顺序，默认0	数字，数值越小越靠前，支持负数

4.2 *栅格布局（高级表格布局）

之前的浮动 / 弹性盒子都是一维，而二维的布局形式采用表格或者栅格

---

• 栅格布局技巧

  1. 设置容器高度

  2. 设置内部 div 的边框 （测试时不显示）

  3. 设置容器的布局方式（栅格）

  4. 设置容器的行和列模板（等分）

  5. 做布局如下：

     ​ ① 选择目标元素

     ​ ② 分析索引 开始索引到结束索引+1

     ​ ③ 删除无效 div 及背景边框

属性	说明
display:grid	设置栅格布局
grid-temple-columns	设置列：repeat(6,1fr) / 像素 /百分比
grid-temple-rows	设置行：repeat(6,1fr) / 像素 /百分比
grid-column	跨列：列起始索引 / 列结束索引+1
grid-row	跨行：行起始索引 / 行结束索引+1
grid-gap	栅格间距
grid-area	复合写法：行起始 / 列起始 /行结束 /列结束
grid-temple-area	模板布局方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>栅格布局</title>
    <style>
        /* 工字布局 */
        .box{
            width: 100%;
            height: 740px;
            margin: auto;
            border: 1px solid red;
            display: grid;
            grid-template-columns: repeat(3,1fr);
            grid-template-rows: repeat(4,1fr);
            grid-gap: 10px;
        }
        div>div{
            border: 1px solid red;           
        }
        div>div:nth-child(1),div>div:nth-child(5){
            grid-column: 1 / 4;
            background-color: aqua;
        }
        div>div:nth-child(2),div>div:nth-child(4){
            grid-row: 2 / 4;
            background-color: orange;
        }
        div>div:nth-child(3){
            grid-row: 2 / 4;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <!-- <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div> -->
    </div>
</body>
</html>