display 是CSS中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值，这与元素的类型有关。

display属性

inline

该元素生成一个或者多个行内框，行内框的大小就是它的标签所定义的大小（元素内容决定）

block

该元素生成一个块级框，除了特殊声明以外，所有的块级元素开始于新的一行，延展到其容器的宽度

inline-block

该元素生成一个块级框，但是整个框的行为是一个行内框

list-item

该元素被渲染为列表项渲染的方式，确切地说就像是一个块级元素，但是会生成一个可以被list-style属性修改样式的标记框，在众多HTML元素中，只有li元素可以具有list-style的默认值

none

将元素及其子元素从文档流中移除，就好像这个元素从来没有存在过一样，且设置display:none的元素不会产生任何框，而且其后代元素也不会产生任何框

flex/inline-flex

该元素会生成一个flex容器，其子元素会变成flex项目，flex与inline-flex的不同就在于flex生成的容器占据一行，而inline-flex生成的容器大小由内部元素决定

flex布局有多种，例如：strech布局、space-between布局、space-around布局、space-evenly布局、center布局、flex-end布局、flex-start布局

space-between布局

space-between属于居中对称布局，其第一个元素与头部对齐，最后一个元素与尾部对齐，相邻元素间距相同

space-around布局

space-around属于居中对称布局，其第一个元素到头部的距离和最后一个元素与尾部的距离相同，均为其它元素间距的一半

space-evenly布局

space-evenly布局属于居中对称布局，其起一个元素到头部的距离和最后一个元素到尾部的距离与其它元素间距相同

center布局

元素居中排列

flex-start/flex-end布局

沿flex主轴的方向从开头到结束依次排列

stretch布局

自动拉伸子元素，直到铺满主元素为止。 tips:

自动拉伸的元素只适用于width为auto的元素，如果指定了width，stretch将会失效
自动拉伸的元素受到max-width/min-width的限制

grid/inline-grid

grid布局即网格（栅格）布局，该元素会生成一个grid元素，同时子元素会变成grid项目。这种布局适合将一个页面分成几个主要区域。grid布局与flex布局不同，flex布局一次只能处理一行或者一列这种一维方式的布局，grid布局一次可以同时处理行、列这种二维元素。通过在元素上设置display的属性为grid或者inline-grid创建一个grid容器，其直系子元素变成grid项目。

grid-template-columns/grid-template-rows

这两个属性分别用于定义网格中的行与列，grid-template-columns可以定义列宽，grid-template-rows可以用于定义行高

grid-row-gap/grid-column-gap

分别设置行间距与列间距

grid-template-areas

该属性一般与grid元素的grid-area一起使用，grid-area指定项目放在哪一个区域

.wrapper { 
    display: grid; 
    grid-gap: 10px; 
    grid-template-columns: 120px 120px 120px; 
    grid-template-areas: 
        ". header header" 
        "sidebar content content"; 
    background-color: #fff; 
    color: #444; 
}

上面分出6个单元格，.表示空的单元格

.sidebar { 
    grid-area: sidebar; 
} 
.content { 
    grid-area: content; 
} 
.header { 
    grid-area: header; 
}

上面将三个类的元素放在grid-template-areas中定义的sidebar、content、header元素中

容器属性

grid-auto-flow

grid-auto-flow属性控制着自动布局算法怎样运作，精确指定网格中被自动布局的元素怎样排列，默认的顺序是先行后列，即填满第一行再放入第二行，即grid-auto-flow: row，如果设置grid-auto-flow: auto dense，可以让下面长度合适的填满这个空白

justify-items、align-items、place-items

justify-items、align-items分别设置单元格内容的水平位置和垂直位置，属性值分别有start、end、center、stretch

justify-content、align-content、place-content

justify-content、align-content属性是整个内容区域在容器内的水平位置，align-content属性是整个内容区域的垂直位置

grid-auto-columns、grid-auto-rows

隐式和显示网格：显式网格包含了你在grid-template-columns和grid-template-rows属性中定义的行和列。如果你在网格定义之外又放了一些东西，或者因为内容的数量而需要的更多网格轨道的时候，网格将会在隐式网格中创建行和列。

假如有多余的网格（也就是上面提到的隐式网格），那么它的行高和列宽可以根据grid-auto-columns属性和grid-auto-rows属性设置。它们的写法和grid-template-columns和grid-template-rows完全相同。如果不指定这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高

fr关键字

grid布局中引入的一个长度单位，1fr表示容器空间中可用空间的一等份

autofill关键字

让一行中能容纳下尽可能多的单元格，可与repeat函数一并使用

minmax函数

第一个参数表示最小宽度，第二个则为最大宽度

auto关键字

由浏览器决定宽度

项目属性

grid-column-start、grid-column-end、grid-row-start、grid-row-end

可以指定网格项目所在的四个边框，分别定位在哪根网格线，从而指定项目的位置

grid-column-start 属性：左边框所在的垂直网格线
grid-column-end 属性：右边框所在的垂直网格线
grid-row-start 属性：上边框所在的水平网格线
grid-row-end 属性：下边框所在的水平网格线

grid-area

grid-area属性指定项目放在哪一个区域

justify-self、align-self、place-self

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

contents

将一个元素从box tree中移除，但是其内容会继续保留，即元素本身不再有任何边界框，但是元素的子元素和伪元素仍然有边界框，元素文字照常显示，因此元素的背景、边框、填充等部分不会渲染，颜色、字体等可以照常作用。

flow-root

显式地创建一个BFC（在块上创建BFC，而不是内联元素）

基于表格的布局

display的值为table、table-header-group等，让元素的表现行为类似于table

参考文章：

最强大的 CSS 布局 —— Grid 布局 2.你不能只会flex居中布局，精制动画讲解所有flex布局方式！通俗易懂纯干货教程！

display属性总结

display属性

inline

block

inline-block

list-item

none

flex/inline-flex