css 布局

什么是布局？

就是根据需要，将 dom 元素进行排列。

常规流动布局

常规是什么，常规就是默认，就是啥也不做，事情本来应该是什么样就什么样。所以常规流动布局就是你的 html 文档结构怎么样，就怎么。比如下面的四个矩形，就是按照它们在文档中出现的顺序依次布局的，排列的也是很整齐，没什么不妥。

css 复制代码

<div style="background: black;height: 50px;"></div>
<div style="background: green; height: 50px;"></div>
<div style="background: red; height: 50px;"></div>
<div style="background: blue; height: 50px;"></div>

在常规流动布局中，有块级元素和行内元素两种元素，块级元素宽度自动 100%，行内元素如果不设置的话则视内容多少而定，会按照不同的排列方式依次排列，直到占满换行。

常规布局是日常开始中用到最多的，但也是最容易被忽略的。因为一切都是默认的，除非想用其它布局方式，否则都会当做理所当然，自然也就想不起来。

关于常规流布局，我觉得养成良好的 html 文档写作习惯非常重要。在一开始就把结构梳理好了，能节约大量用来布局的事件。

flex 弹性盒子布局

flex弹性盒子布局是我见过的代码里面用到非常多的一个。那么，什么是 flex 弹性盒子布局呢？

什么是flex 弹性盒子布局？

首先，它是一个布局方式。那它是什么样的布局方式呢？是一种可以把元素按行逐个排列的方式，有点类似于正常的流布局。但是它和正常的流布局不同的地方在于，它对每行的空间分配具有非常大的灵活性。既可以对某一行设置固定的宽高，也可以让它基于容器变化。它还是一种可以改变元素默认的排列方式，让原先逐行排列的布局变成逐列排序。并且可以灵活的分配每列的空间。它还可以调整元素的显示顺序。

所以，flex 布局就是一种可以按行或者按列布局，且能够灵活分配空间的布局方式

怎么使用flex布局？

首先需要确定需要布局的元素，然后把它们放到一个容器里。

比如下面这四个矩形，现在想用 flex 来重新布局成纵向的。首先需要将它们放到一个盒子里面，并将其 display 属性设置为 flex，使其成为容器。如下

css 复制代码

  <div  class="container">
    <div style="background: black;height: 50px;width: 100px;"></div>
    <div style="background: green;height: 50px;width: 100px;"></div>
    <div style="background: red; height: 50px;width: 100px;"></div>
    <div style="background: blue; height: 50px;width: 100px;"></div>
  </div>

  <style>
    .container{
        display: flex;
    }
  </style>

原先的一列四行一下子变成了一行四列。但是我们又额外的写了一些代码，就是给每一个子元素都加了宽，否则就啥都看不见。这是因为把容器设置为 flex 后，它里面的子元素都会跟着发生变化。这块先搁置一下，继续探索被设置成 flex 的容器。

一个容器被设置成flex 后，默认是按照列来布局的，要改变这一属性，就需要匹配的另外一个属性flex-direction，它的默认值就是 row,也就是按所有内容都放到一行，还有一个参数值叫column,也就是所有内容都放到一列。对应的，它们两个都有一个反转值，也就是row-reverse,column-reverse。下面的例子使用了row-reverse.

这里首先能看到的是矩形的位置做了个反转，但同时整体的位置也发生了调换，直接从左边跳到了右边去了。这是因为当容器被设置成 flex 盒子时，会默认设置两条从左上角出发的线，一条向右，叫主轴main axis，一条向下，叫交叉轴 cross axis，出发点叫 start，结束点叫 end。当把flex-direction的属性值设置为column时，主轴和交叉轴互换。而使用对应的 reverse 时，起点则换到了盒子右上角。因此，这里我们使用了flex-direction: row-reverse;才出现了现在看到的情况。

现在只有四个宽度为 100px的矩形，在一行内还能放的下，宽度或者数目发生了巨大变化的时候，要怎么办才好呢？为了解决这个问题，可以在盒容器上使用flex-wrap属性，来让多余的内容怎么展现。它有三个值，默认情况下是nowrap，也就是一直往后堆砌；第二个值是"wrap"，也就是放不下就换行接着放；第三个值是wrap-reverse，结果就是把 wrap 的结果反转一下就行，让换行后的内容在上边。

flex-direction和flex-wrap一起有一个简写形式叫flex-flow,后面有两个值，第一个是flex-direction，第二个是flex-wrap 的值。

在布局中，对齐一直都是让人头疼的事，flex 很好的解决了这个问题。

justify-content属性解决了主轴方向对齐的问题，有 5 个参数值,分别是flex-start和主轴起点对齐，默认就是左对齐,flex-end和主轴结束点对齐，默认就是右对齐, center 相对主轴居中对齐, space-between两端对齐，中间分出均等的空间, space-around 均分空间，每个项目之间的空间相等。

align-items属性解决了交叉轴上对齐的问题，它也有五个属性，分别是flex-start起点对齐, flex-end终点对齐,center中点对齐，baseline第一行文字的底部对齐，stretch 没有设置高度或者项目高度为 auto，自动填满。

此外，还有一个属性，align-content，当 flex-wrap属性为 wrap 或者 wrap-reverse 时，并且子项目换行了的话，就需要align-content，它有flex-start起点对齐, flex-end终点对齐,center中点对齐， space-between 与交叉轴两端对齐，轴线之间的间隔平均分布。 space-around 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。stretch没有设置高度或者项目高度为 auto，自动填满。

到了这里，容器上面的所有属性就学习完了。剩下的就是每个子项上的属性。

首先出场的是order，字如其名，决定每个子项目的顺序，默认为 0，数字越小越靠前。比如下面代码，把绿色放到最前面只需要把它的 order 属性设置为-1 即可。

css 复制代码

<div style="display: flex;">
    <div style="background: black;height: 50px;width: 100px;"></div>
    <div style="background: green;height: 50px;width: 100px;order: -1;"></div>
    <div style="background: red; height: 50px;width: 100px;"></div>
    <div style="background: blue; height: 50px;width: 100px;"></div>
</div>

第二个属性，flex-grow字如其名，决定在有空余空间的时候，是否放大，默认情况下不变，默认值为 0，如果为非 0 的，则按数字对应的比例均分剩余空间。如下代码，将还得区域设置为 1，则其独占剩余空间

css 复制代码

<div style="display: flex;">
    <div style="background: black;height: 50px;width: 100px;flex-grow: 1;"></div>
    <div style="background: green;height: 50px;width: 100px;order: -1;"></div>
    <div style="background: red; height: 50px;width: 100px;"></div>
    <div style="background: blue; height: 50px;width: 100px;"></div>
</div>

和flex-shrink相对的则是，当空间区域不足时，是否缩小。默认值为 1，缩小，0 不缩小。不能是负数，其它的则根据数字等比例缩小。

flex-basic用来定义不缩放的时候，子项目的大小。flex属性是以上三个属性flex-grow，flex-shrink，flex-basic的缩写形式，默认值为 0 1 auto。

到这里 flex 布局就学习完了。总结一下就是 flex container 配置对齐，换行，位置，flex item 自己决定大小和位置。

grid 网格布局

和 flex 弹性盒子布局一样， grid 网格布局也是现代代码里常见的布局之一，尤其是那些只为 chrome 写代码的人里面。

和 flex 不一样的是，flex 只能是操作一行或者一列，也就是通过flex-direction确定主轴的方向，然后去操作行或者列，而 grid 则可以同时操作行和列。

grid 布局的用法

和 flex 一样，首先需要一个容易盒子,然后把需要布局的项目放在里面，称为子项目。这里把 container 的display属性设置为'grid'。为其它子项目设置背景颜色，就出现了下面的情况。看起来和正常流布局没啥区别，先不管。

1
2
3
4
5
6
7
8
9

xml 复制代码

<div class="container">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
    <div class="item item6">6</div>
    <div class="item item7">7</div>
    <div class="item item8">8</div>
    <div class="item item9">9</div>
</div>
<style>
  .container{
    display: grid;
  }
  .item: {
    
  }
  .item{
    border:solid 1px black;
  }
</style>

为了改变所有项目挤在一起丑陋的样子，需要使用grid-template-rows和grid-template-columns来设置每一行每一列有多高，有多少个子项目。具体用法如下

css 复制代码

.container{
    grid-template-row: lineHeight1 lineHeight2 lineHeight3;
    grid-template-column： rowWidth1 rowWidth2 rowWidth3; 
}

有多少行就定义多少个行高即可,有多少个列定义多少个列高即可。这里一共有9 个子项目，所以设置成 3*3 的即可。

可以分别先只设置grid-template-rows和 grid-template-columns看看效果，如果只设置一个，另外一个则被默认为只有 1，对应的宽度或者高度则为元素本身的宽高。
1
2
3
4
5
6
7
8
9

xml 复制代码

<div class="container">
    <div class="item item1" >1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
    <div class="item item6">6</div>
    <div class="item item7">7</div>
    <div class="item item8">8</div>
    <div class="item item9">9</div>
</div>
<style>
  .container{
    display: flex;
    grid-template-rows: 100px 100px 100px;
    grid-template-columns: 100px 100px 100px;
  }
  .item: {
    border:solid 1px black; 
  }
</style>

repeat()函数

这样，一个 grid 的布局就出来了，记住这两个属性，一些简单的 grid 布局就能完成。但是它的强大不止于此。如果有很多的行或者列，一个个写下去就很麻烦，这个时候就要用到repeat()函数。它接收两个值，第一个是要重复的次数，第二个是要重复的模式。

比如前面我们的行和列是这样写的

css 复制代码

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

使用repeat()则可以这样写,效果是一样的。

css 复制代码

.container{
    grid-template-rows: repeat(3, 100px);
    grid-template-columns: repeat(3, 100px);
}

如果我们模式重复，但是行高或者列高有区别，比如每三行重复一次,像这样的重复重复 5。则可以这样写

css 复制代码

.container{
    grid-template-rows: repeat(5, 100px 120px 200px);
    grid-template-columns: repeat(5, 100px 120px 200px);
}

auto-fill 关键字

那如果是行和列不确定怎么办呢？传auto-fill关键字给repeat即可。这样，就会根据行高和行宽自动填满容器。

arduino 复制代码

.container{
    grid-template-rows: repeat(auto-fill, 100px 120px 200px);
    grid-template-columns: repeat(auto-fill, 100px 120px 200px);
}

fr 关键字

在定义行高行宽时，合法的单位都可以使用，比如 px，百分比等。但是远不止于此，它还提供了一个类似百分比，但是强于百分比的关键单位 fr。它用来按比例划分空间，1fr 代表一个单位，如下代码代表占据全部空间。需要注意的是grid-template-rows如果容器没有定义高度，则会失效。

css 复制代码

.container{
    grid-template-rows: 1fr;
    grid-template-columns: 1fr;
}

如下代码则代表第一列宽度是 3 分之一，第二列宽度是 3 分之二

css 复制代码

.container{
    grid-template-columns: 1fr 2fr;
}

和其它单位一样，fr 在这里可以混合着用。

minmax()

除了按比例划分，还可以给定一个变化的区间范围。这就是minmax()函数，它接收两个参数，分别为最小和最大值，表示空间不足时至少也要这个长度，即使空间很大也不能超过这个长度。

auto 关键字

在定义长度的过程中，有些区域的大小我们并不在乎，只是想填点东西进去显得不那么突兀，就可以使用auto关键词，可以让空间自由伸缩。

行和列之间的留白 grid-row-gap grid-column-gap

有时候子项目之间需要一个留白，这个时候我们就可以使用 grid-row-gap 和grid-column-gap来定义。也可以用他两的简写形式grid-gap来定义，它接受两个值，第一个是行之间的留白，第二个是列之间的留白。

开个脑洞，如果不用grid-gap，用其它属性，这个留白怎么实现，有那些坑？
1
2
3
4
5
6
7
8
9

xml 复制代码

<div class="container">
    <div class="item item1" >1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
    <div class="item item6">6</div>
    <div class="item item7">7</div>
    <div class="item item8">8</div>
    <div class="item item9">9</div>
</div>
<style>
  .container{
    display: flex;
    grid-template-rows: 100px 100px 100px;
    grid-template-columns: 100px 100px 100px;
    grid-row-gap: 10px;
    grid-column-gap: 10px;
  }
  .item: {
    border:solid 1px black; 
  }
</style>

grid-auto-flow

是否记得 flex 布局里面有个flex-direction属性来决定是主轴的方向，也就是怎么排列。在 grid 布局里面也有个类似的属性值叫 grid-auto-flow来决定子项目的排列方向，它决定了优先排列的顺序是按行还是按列。所以它接收 row 和column两个值，默认是row，其实还有两个变体row dense和column dense，变体后面再继续学习。

grid-auto-flow的属性是为 row

1
2
3
4
5
6
7
8
9

xml 复制代码

<div class="container">
    <div class="item item1" >1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
    <div class="item item6">6</div>
    <div class="item item7">7</div>
    <div class="item item8">8</div>
    <div class="item item9">9</div>
</div>
<style>
  .container{
    display: flex;
    grid-template-rows: 100px 100px 100px;
    grid-template-columns: 100px 100px 100px;
    grid-row-gap: 10px;
    grid-column-gap: 10px;
    grid-auto-flow: row;
  }
  .item: {
    border:solid 1px black; 
  }
</style>

grid-auto-flow的属性是为 column

1
2
3
4
5
6
7
8
9

xml 复制代码

<div class="container">
    <div class="item item1" >1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
    <div class="item item6">6</div>
    <div class="item item7">7</div>
    <div class="item item8">8</div>
    <div class="item item9">9</div>
</div>
<style>
  .container{
    display: flex;
    grid-template-rows: 100px 100px 100px;
    grid-template-columns: 100px 100px 100px;
    grid-row-gap: 10px;
    grid-column-gap: 10px;
    grid-auto-flow: column;
  }
  .item: {
    border:solid 1px black; 
  }
</style>

对比发现，grid-auto-flow 的属性为 row 时，从左往右依次排列数字，也就是行优先。为 column 时，从上到下一次排列，也就是列优先。

子项目对齐方式 justify-items，align-items，place-items

justify-items用来设置水平对齐方式，align-items用来设置垂直对齐方式。place-items是它们两的简写。

它们的属性值完全相同，所以一起记就可以。除了stretch，其它对齐方式都是不管子项的宽度的，因此要小心。

start：对齐单元格的起始边缘。
end：对齐单元格的结束边缘。
center：单元格内部居中。
stretch：拉伸，占满单元格的整个宽度（默认值）。

项目的对齐方式 justify-content align-content place-content

这三个属性用来定义整个内容区域的对齐方式 justify-content表示水平，align-content 表示垂直，place-content是二者的简写。由于两者的属性值一模一样，为了节省时间以justify-content为例学习一下

justify-content 为start

1
2
3
4
5
6
7
8
9

xml 复制代码

<div class="container">
    <div class="item item1" >1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
    <div class="item item6">6</div>
    <div class="item item7">7</div>
    <div class="item item8">8</div>
    <div class="item item9">9</div>
</div>
<style>
  .container{
    display: flex;
    grid-template-rows: 100px 100px 100px;
    grid-template-columns: 100px 100px 100px;
    grid-row-gap: 10px;
    grid-column-gap: 10px;
    grid-auto-flow: column;
    column;justify-content: start;border:solid red 1px
  }
  .item: {
    border:solid 1px black; 
  }
</style>

justify-content 为end

1
2
3
4
5
6
7
8
9

xml 复制代码

<div class="container">
    <div class="item item1" >1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
    <div class="item item6">6</div>
    <div class="item item7">7</div>
    <div class="item item8">8</div>
    <div class="item item9">9</div>
</div>
<style>
  .container{
    display: flex;
    grid-template-rows: 100px 100px 100px;
    grid-template-columns: 100px 100px 100px;
    grid-row-gap: 10px;
    grid-column-gap: 10px;
    grid-auto-flow: column;
    column;justify-content: end;border:solid red 1px
  }
  .item: {
    border:solid 1px black; 
  }
</style>

justify-content 为center

1
2
3
4
5
6
7
8
9

xml 复制代码

<div class="container">
    <div class="item item1" >1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
    <div class="item item6">6</div>
    <div class="item item7">7</div>
    <div class="item item8">8</div>
    <div class="item item9">9</div>
</div>
<style>
  .container{
    display: flex;
    grid-template-rows: 100px 100px 100px;
    grid-template-columns: 100px 100px 100px;
    grid-row-gap: 10px;
    grid-column-gap: 10px;
    grid-auto-flow: column;
    column;justify-content: center;border:solid red 1px
  }
  .item: {
    border:solid 1px black; 
  }
</style>

justify-content 为stretch

stretch 属性值在没指定列宽时会自动填满，但是指定了就和 start 没有区别。这里我特意注释掉了列宽。
1
2
3
4
5
6
7
8
9

xml 复制代码

<div class="container">
    <div class="item item1" >1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
    <div class="item item6">6</div>
    <div class="item item7">7</div>
    <div class="item item8">8</div>
    <div class="item item9">9</div>
</div>
<style>
  .container{
    display: flex;
    grid-template-rows: 100px 100px 100px;
    <!-- grid-template-columns: 100px 100px 100px; -->
    grid-row-gap: 10px;
    grid-column-gap: 10px;
    grid-auto-flow: column;
    column;justify-content: stretch;border:solid red 1px
  }
  .item: {
    border:solid 1px black; 
  }
</style>

justify-content 为space-around

每一个项目两侧间隔相等且不合并。所以可以看到两个项目之间要宽一点。这里开一下脑洞，margin 合并的知识点还记得不？
1
2
3
4
5
6
7
8
9

xml 复制代码

<div class="container">
    <div class="item item1" >1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
    <div class="item item6">6</div>
    <div class="item item7">7</div>
    <div class="item item8">8</div>
    <div class="item item9">9</div>
</div>
<style>
  .container{
    display: flex;
    grid-template-rows: 100px 100px 100px;
    grid-template-columns: 100px 100px 100px;
    grid-row-gap: 10px;
    grid-column-gap: 10px;
    grid-auto-flow: column;
    column;justify-content: space-around;border:solid red 1px
  }
  .item: {
    border:solid 1px black; 
  }
</style>

justify-content 为space-between 项目间间隔相等，与边缘没有间隔

1
2
3
4
5
6
7
8
9

xml 复制代码

<div class="container">
    <div class="item item1" >1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
    <div class="item item6">6</div>
    <div class="item item7">7</div>
    <div class="item item8">8</div>
    <div class="item item9">9</div>
</div>
<style>
  .container{
    display: flex;
    grid-template-rows: 100px 100px 100px;
    grid-template-columns: 100px 100px 100px;
    grid-row-gap: 10px;
    grid-column-gap: 10px;
    grid-auto-flow: column;
    column;justify-content: space-around;border:solid red 1px
  }
  .item: {
    border:solid 1px black; 
  }
</style>

justify-content 为space-evenly 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。对比 space-around 学习

1
2
3
4
5
6
7
8
9

xml 复制代码

<div class="container">
    <div class="item item1" >1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
    <div class="item item6">6</div>
    <div class="item item7">7</div>
    <div class="item item8">8</div>
    <div class="item item9">9</div>
</div>
<style>
  .container{
    display: flex;
    grid-template-rows: 100px 100px 100px;
    grid-template-columns: 100px 100px 100px;
    grid-row-gap: 10px;
    grid-column-gap: 10px;
    grid-auto-flow: column;
    column;justify-content: space-evenly;border:solid red 1px
  }
  .item: {
    border:solid 1px black; 
  }
</style>

容器之内布局之外的行高列高 grid-auto-rows， grid-auto-columns

有时候我们虽然在精心布局，但是难免出现一些特殊的情况在布局之外，但是容器之内出现子项，这个时候就有一个难题。比如咱们 demo 里的这个9 个格子本来没事，但是要有一个 10 怎么办？
1
2
3
4
5
6
7
8
9
10

xml 复制代码

<div class="container">
    <div class="item item1" >1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
    <div class="item item6">6</div>
    <div class="item item7">7</div>
    <div class="item item8">8</div>
    <div class="item item9">9</div>
</div>
<style>
  .container{
    display: flex;
    grid-template-rows: 100px 100px 100px;
    grid-template-columns: 100px 100px 100px;
    grid-row-gap: 10px;
    grid-column-gap: 10px;
  }
  .item: {
    border:solid 1px black; 
  }
</style>

看上面例子，就是凉拌。这肯定不行，所以需要给他们一个默认值，所以就有grid-auto-rows和grid-auto-columns的用途了。给它们设置一个默认值看看。
1
2
3
4
5
6
7
8
9
10

xml 复制代码

<div class="container">
    <div class="item item1" >1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
    <div class="item item6">6</div>
    <div class="item item7">7</div>
    <div class="item item8">8</div>
    <div class="item item9">9</div>
</div>
<style>
  .container{
    display: flex;
    grid-template-rows: 100px 100px 100px;
    grid-template-columns: 100px 100px 100px;
    grid-row-gap: 10px;
    grid-column-gap: 10px;
    grid-auto-rows: 100px;
  }
  .item: {
    border:solid 1px black; 
  }
</style>

grid-template-areas 为每一个区域命名

为每一个区域娶一个名字，这个知识点现在知道就行。后面用。如

css 复制代码

.container{
    grid-template-rows: 100px 100px 100px;
    grid-template-columns: 100px 100px 100px;
    grid-template-areas: 'a b c'
                         'd e f'
                         'g h i';
}

关于 grid 布局 container 的知识点到这里就学习完了。没想到这么多，总结一下，首先声明 display 属性为 flex。然后设置 grid-template-rows 和 grid-template-columns决定布局。为了防止出现布局外的因素，可以使用 grid-auto-rows，grid-auto-columns来设置超出子项的默认布局。通过 grid-auto-flow 来决定渲染的顺序是按行还是按列。justify-items和 align-items 分别用来定义水平和垂直对齐方式，justify-conent和 align-content 用来决定内容区域的对齐方式。

子项目决定自己的大小和位置

可以通过指定位置的方式，子项目决定自己占据的布局空间。

grid-column-start属性：左边框所在的垂直网格线
grid-column-end属性：右边框所在的垂直网格线
grid-row-start属性：上边框所在的水平网格线
grid-row-end属性：下边框所在的水平网格线
grid-area 放置项目到grid-template-areas 命名的空间

1
2
3
4
5
6
7
8
9
10

xml 复制代码

<div class="container">
    <div class="item item1" >1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
    <div class="item item6">6</div>
    <div class="item item7">7</div>
    <div class="item item8">8</div>
    <div class="item item9">9</div>
</div>
<style>
  .container{
    display: flex;
    grid-template-rows: 100px 100px 100px;
    grid-template-columns: 100px 100px 100px;
    grid-row-gap: 10px;
    grid-column-gap: 10px;
    grid-auto-rows: 100px;
    grid-column-start:2; 
    grid-column-end: 4;
    grid-row-start:2;
    grid-row-end: 3;
  }
  .item: {
    border:solid 1px black; 
  }
</style>

子项内的对齐方式

justify-self决定水平对齐，align-self 决定垂直对齐，place-self 是简写。它们的属性值一样。如下

start：对齐单元格的起始边缘。
end：对齐单元格的结束边缘。
center：单元格内部居中。
stretch：拉伸，占满单元格的整个宽度（默认值）。

这一部分完全花费的时间完全超出了我的预料，能看到的有缘人自己写demo实践吧。

浮动布局

flex 布局和 grid 布局是现代 web 开发常用的布局方式，然而在它们出现之前，浮动布局则被经常用到。

float 属性

元素设置了 float 属性后就会向某一个方向浮动过去，内联样式和文字会围绕着它，也就是说碰到文字和内联样式，它会根据自己的大小占据文档流，而遇到块级样式，则会重合。脱离文档。块级样式盒子会和它重合，但是文字依然会围绕着它。如下
浮动
这个是块级盒子

css 复制代码

<div style="height: 100px;background: #e74478;">
    <div style="height: 50px;background: green;width: 50px;float: left;opacity: 0.6;">浮动</div>
     <div style="background: yellow;height: 50px;">这个是块级盒子<div>
</div>

left 向左浮动
right 向右浮动
inline-start 向容器开始的一侧浮动向开始的一侧浮动，这个具体在左边还是右边受direction:属性值的影响，ltr 在左，rtl 在右。
inline-end 向容器浮动结束的一侧浮动，具体在左边还是右边受direction:属性值的影响。

clear

学习了 float，clear 属性就不得不学习，不然会不完整。如果一个元素旁边有浮动元素，内联的会紧挨着它，块级这会和它贴在一起，为了打破这种局面，就需要 clear 属性值。

left 清除元素左边的浮动，把当前元素移到下一行
right 清除元素右边的浮动，把元素移到下一行
both 清除元素两边的浮动
inline-start 清除启始位置的浮动。具体看 direction 属性的值
inline-end 清楚结束位置的浮动。具体看 direction 属性的值

这里有个容易混淆的概念，就是 clear 属性是用在换行的元素上，而不是当前浮动的元素上，当然这里这个需要换行的元素也可以是另外一个浮动元素。

比如下面的绿色盒子和蓝色盒子，如果想让蓝色盒子换到下一行，则给它添加clear:left;,想让绿色盒子换到下一行，则得想想其他办法，因为它蓝色在它后面。

css 复制代码

<div style="background: #e74478;height: 200px;">
    <div style="float: left;width: 50px;height: 50px;background:green;"></div>
    <divstyle="float: left;width: 50px;height: 50px;background: blue;"></div>
</div>

多列布局

多列布局之前一直被我忽略，今天复习才发现，原来还可以这么写。它很简单，就四个属性。

column-count 一共有多少多少列。 auto 根据宽度和容器大小自定义大于 0 的具体数字，代表有多少列。
column-width 每一列容器的最小宽度，两个参数值，auto，根据容器大小和列个数自定义。最小宽度，合法的 css 值即可，小于这个值就不缩小了，其它时候会自适应。
column-gap 列之间的宽度
column-rule 列直接的分割线，写法类似 border

xml 复制代码

<div class="container">
    <div class="item item1"></div>
    <div class="item item2"></div>
    <div class="item item3"></div>
    <div class="item item4"></div>
</div>

<style>
    .container{
        column-width: 100px;
        column-count: 2;
    }
    .item1{
        background: aliceblue;
    }
    .item2{
        background: aqua;
    }
    .item3{
        background: #d8d873;
    }
    .item4{
        background: blue;
    }
    
</style>

什么是布局？

常规流动布局

flex 弹性盒子布局

什么是flex 弹性盒子布局？

怎么使用flex布局？

grid 网格布局

grid 布局的用法

repeat()函数

auto-fill 关键字

fr 关键字

minmax()

auto 关键字

行和列之间的留白 grid-row-gap grid-column-gap

grid-auto-flow

子项目对齐方式 justify-items，align-items，place-items

项目的对齐方式 justify-content align-content place-content

容器之内布局之外的行高列高 grid-auto-rows， grid-auto-columns

grid-template-areas 为每一个区域命名

子项目 决定自己的大小和位置

子项内的对齐方式

浮动布局

float 属性

clear

多列布局

子项目决定自己的大小和位置