这是我参与「第四届青训营」笔记创作活动的第7天

前言

最近课程内容有点太吃计算机基础了，非科班萌新表示在线挠头。所以我还是选择继续夯实 CSS 的基础，此次就来对之前笔记一笔带过蒙混过关的布局进行理解加深。

flex 布局

之前所做的布局都是基于盒子模型和浮动、定位实现的，但是有个很明显的问题是，这种布局并不好实现对网页的维护，使用了浮动还需要考虑清除浮动，需要调整的代码会比较多。那要如何使维护和扩展更加简洁和有条理呢？很容易想到一个思路：在项目外再套一个容器就好了！

flex 容器

首先通过display属性设置一个 flex 容器：

.container {
            display: flex;
          }

该容器会变成一个 flex 容器（flex container），容器内部的元素被称为 flex 项目（flex item），在这个容器内部浮动会失效，通过设置 flex 容器的 CSS 样式，可以改变内部项目的布局方式。

这是 flex 布局示例图，让我们结合代码和实现理解它。

默认情况下 flex 项目按照 main 轴排列：

.container {
            display: flex;
        }
.box {
        border: 1px solid black;
      }

<div class="container">
        <div class="box">box1</div>
        <div class="box">box2</div>
        <div class="box">box3</div>
</div>

这是效果图

可以看到，在容器内，块元素没有独立成行。

flex-direction

通过设置容器的flex-direction属性，就可以改变容器内项目的排列了！

 .container {
            display: flex;
            flex-direction: column;
            border: 1px solid blue;
        }

justify-content

通过设置容器的justify-content属性就可以控制 flex 项目在容器中的水平排列方式了！

 .container {
            display: flex;
            justify-content: center;
            border: 1px solid blue;
        }

justify-content: start;flex 项目在 main 轴开始位置展示。
justify-content: end;flex 项目在 main 轴结束位置展示。
justify-content: center;flex 项目在 main 轴居中展示。

align-items

通过设置容器的align-items属性就可以控制 flex 项目在容器中的垂直排列方式了！

.container {
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid blue;
            height: 200px;
        }

这样就完成了一个居中的效果。

align-items: start;flex 项目在 cross 轴开始位置展示
align-items: end;flex 项目在 cross 轴结束位置展示
align-items: center;flex 项目在 cross 轴居中展示

flex 项目

前面讲的都是容器的属性，那能不能通过设置项目的属性来改变样式呢：

通过项目的align-self 属性就可以规定容器内所选项目的对齐方式，而且还将覆盖容器的 align-items 属性所设置的默认对齐方式！

 .container {
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid blue;
            height: 200px;
        }

.box {
            align-self: flex-start;
            border: 1px solid black;
        }

没有再居中显示了！

grid 布局

grid 布局可以为网页提供更强大的布局功能。

flex 布局为一维布局，一般一行或一列的布局使用 flex 布局。
grid 布局为二维布局，同时需要兼顾行与列的布局，可以使用 grid 布局。

基本概念

grid 容器的水平区域成为行（ row ），垂直区域成为列（ column ），行与列之间构成的是单元格（ cell ），划分网格的线成为网格线（ grid line ）。

~~好了你已经懂了，去做一个网格布局吧！~~

grid 容器

首先将一个元素设置为 grid 容器：

.container{
    display:grid;
}

grid 容器内部的元素称为 grid 容器的项目，grid 项目的 float 属性会失效。

grid-template-columns 可以设置 grid 容器中的项目有多少列，并指定列的宽度：

 .container {
            display: grid;
            grid-template-columns: 100px 100px 100px;
        }

.item {
            border: 1px solid black;
        }

<div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
    </div>

还可以通过 fr 设置列宽度的比例：

.container {
            display: grid;
            grid-template-columns: 1fr 1fr 2fr;
            width: 200px;
        }

grid-template-rows属性可以设置 grid 容器中的项目有多少行，并指定行的宽度。

justify-items属性与align-items属性可以设置单元的水平位置和垂直位置：

justify-content属性与aling-content属性可以设置整个内容区域在容器里面的水平位置和垂直位置。

grid 项目

justify-self属性可以设置单元格内容的水平位置。
align-self属性可以设置单元内容的垂直位置。

grid-column-start属性与grid-column-end属性可以指定左右边框垂直网格线；

grid-row-start属性与grid-row-end属性可以指定上下边框水平网格线；

.item1 {
            grid-column-start: 1;
            grid-column-end: 3;
            grid-row-start: 1;
            grid-row-end: 3;
        }

媒体查询

之前笔记中有提到动画效果，其中有使用到 @ 这个符号，让我们再来见识一种新的用法@media。

@media screen and (max-width:600px){
	.box{
	      background-color: blue;
	}
}

这段代码的意思是，小于指定宽度时，样式才生效。

@media screen and (min-width:600px) and (max-width:900px){
    .box{
        background-color: blue;
    }
}

这就是给媒体查询定义多个标准的方法！

写在最后

那么 CSS 的笔记就告一段落了，还有很多新特性，但不可能一直死磕 CSS ，~~JavaScript我还一知半解呢。~~ 平时多查阅文档 CSS ，做些小练习就好。那么，下次见！

再看 CSS 布局 | 青训营笔记

前言