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

今天主要回顾一下CSS布局相关的问题

CSS

CSS 是用来指定文档如何展示给用户的一门语言——如网页的样式、布局、等等。

CSS布局

正常布局流

正常布局流 (normal flow) 是指在不对页面进行任何布局控制时，浏览器默认的 HTML 布局方式。

行级排版上下文

只包含行级盒子的容器会创建一个IFC(Inline Formatting Context)
IFC内的排版规则：

盒子在一行内水平摆放
一行放不下时，换行显示
text-align:决定一行内盒子的水平对齐
vertical-align:决定一个盒子在行内的垂直对齐
避开浮动元素

块级排版上下文

某些容器会创建一个BFC

根元素
浮动、绝对定位、inline-block
flex子项和grid子项
overflow不是visible的块盒
dispaly:flow-root

BFC内的排版规则

盒子从上到下拜访
垂直margin合并
BFC内盒子的margin不会与外面的合并
BFC不会和浮动元素重叠

display属性

display属性允许我们更改默认的显示方式。

弹性盒子（Flexbox）

flex布局是CSS3新增的一种布局方式，可以通过将一个元素的display属性值设置为flex从而使它成为一个flex容器，它的所有子元素都会成为它的项目。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。一个容器默认有两条轴：一个是水平的主轴，一个是与主轴垂直的交叉轴。

以下6个属性设置在容器上：

flex-direction属性决定主轴的方向（即项目的排列方向）。
flex-wrap属性定义，如果一条轴线排不下，如何换行。
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
justify-content属性定义了项目在主轴上的对齐方式。
align-items属性定义项目在交叉轴上如何对齐。
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

以下6个属性设置在项目上：

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
flex属性是flex-grow，flex-shrink和flex-basis的简写，默认值为0 1 auto。
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

flex:1 表示 flex: 1 1 0%

Grid布局

同 flex 一样，你可以通过指定 display 的值来转到 grid 布局：display: grid。那么我们为什么要引入grid布局呢？

Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大

概念

采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）。注意：项目只能是容器的顶层子元素，不包含项目的子元素。Grid 布局只对项目生效

举例：

<div>
  <div><p>1</p></div>
  <div><p>2</p></div>
  <div><p>3</p></div>
</div>

在这里最外层<div>是元素，而内层的三个<div>就是项目

水平区域称为行(row)，垂直区域称为列(column)；行和列的交叉区域成为单元格(cell)，划分网格的线称为网格线(grid line)

容器属性

display: grid指定一个容器采用网格布局(块级网格)

display: inline-grid 生成行内网格

grid-template-columns 属性定义每一列的列宽，grid-template-rows属性定义每一行的行高

repeat()：有时候，重复写同样的值非常麻烦，尤其网格很多时。这时，可以使用repeat()函数，简化重复的值。repeat()接受两个参数，第一个参数是重复的次数，第二个参数是所要重复的值。

.container {
  display: grid;
  grid-template-columns: repeat(3, 33.33%);
  grid-template-rows: repeat(3, 33.33%);
}

auto-fill：有时，单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充。下面的代码表示每列宽度为100px，然后自动填充，知道不能放置更多的列。

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

fr：为了方便表示比例关系，网格布局提供了fr关键字（fraction 的缩写，意为"片段"）。如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍
minmax()函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。
auto表示有浏览器自己决定长度
grid-template-columns属性和grid-template-rows属性里面，还可以使用方括号，指定每一根网格线的名字，方便以后的引用。

.container {
  display: grid;
  grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
  grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}

row-gap属性设置行与行的间隔（行间距），column-gap属性设置列与列的间隔（列间距）。
grid-template-areas属性用于定义区域
grid-auto-flow属性指定自动布局算法怎样运作，精确指定在网格中被自动布局的元素怎样排列

justify-items属性设置单元格内容的水平位置（左中右），align-items属性设置单元格内容的垂直位置（上中下）。place-items属性是align-items属性和justify-items属性的合并简写形式。

start：对齐单元格的起始边缘。

end：对齐单元格的结束边缘。

center：单元格内部居中。

stretch：拉伸，占满单元格的整个宽度（默认值）

justify-content属性是整个内容区域在容器里面的水平位置（左中右），align-content属性是整个内容区域的垂直位置（上中下）
grid-auto-columns属性和grid-auto-rows属性用来设置，浏览器自动创建的多余网格的列宽和行高。

项目属性

grid-column-start属性：左边框所在的垂直网格线
grid-column-end属性：右边框所在的垂直网格线
grid-row-start属性：上边框所在的水平网格线
grid-row-end属性：下边框所在的水平网格线
grid-area属性指定项目放在哪一个区域
justify-self属性设置单元格内容的水平位置（左中右），

align-self属性设置单元格内容的垂直位置（上中下）

学习参考：

阮一峰flex布局教程

阮一峰gird布局教程

MDN文档

CSS布局 ｜ 青训营笔记

CSS