Table布局 Flex布局 Grid布局

Table 布局方式

在网页制作过程中，有两种实现 table 布局的方式：

• 布局方式一：使用 table 元素及相关元素进行布局。

• 布局方式二：使用与表格相关的 display 属性值来模拟表格进行布局。

table 元素通常用于描述一条或一组数据。而非表格内容用 table 来描述，不符合标签语义化要求。如果项目中需要类似表格的布局怎么办呢？可以用 display: table; 来解决。

display: table; 系列几乎是和 table 系的元素相对应的，请看下表：

display的值	描述
table	类似 <table>，此元素会作为块级表格来显示。
inline-table	类似 <table>，此元素会作为内联表格来显示。
table-row-group	类似 <tbody>，此元素会作为一个或多个行的分组来显示。
table-header-group	类似 <thead>，此元素会作为一个或多个行的分组来显示。
table-footer-group	类似 <tfoot>，此元素会作为一个或多个行的分组来显示。
table-row	类似 <tr>，此元素会作为一个表格行显示。
table-column-group	类似 <colgroup>，此元素会作为一个或多个列的分组来显示。
table-column	类似 <col>，此元素会作为一个单元格列显示。
table-cell	类似 <td> 和 <th>，此元素会作为一个表格单元格显示。
table-caption	类似 <caption>，此元素会作为一个表格标题显示。

Flex 布局

布局的传统解决方案，基于盒状模型，依赖 display 属性 + position 属性 + float 属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

Flex 布局是什么

Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为 Flex 布局。

.box{
  display: flex;
}

行内元素也可以使用 Flex 布局。

.box{
  display: inline-flex;
}

 

基本概念

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称容器。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称项目。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做 main start，结束位置叫做 main end；交叉轴的开始位置叫做 cross start，结束位置叫做 cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size，占据的交叉轴空间叫做 cross size。

容器的属性

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

• flex-direction：决定主轴的方向。

• flex-wrap：如果一条轴线排不下，如何换行。

• flex-flow：flex-direction 属性和 flex-wrap 属性的简写属性。

• justify-content：定义项目在主轴上的对齐方式。

• align-items：定义项目在交叉轴上如何对齐。

• align-content：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

 

flex-direction 属性

flex-direction 属性决定主轴的方向（即项目的排列方向）。

它可能有 4 个值：

• row（默认值）：主轴为水平方向，起点在左端。

• row-reverse：主轴为水平方向，起点在右端。

• column：主轴为垂直方向，起点在上沿。

• column-reverse：主轴为垂直方向，起点在下沿。

flex-wrap 属性

默认情况下，项目都排在一条线（又称轴线）上。flex-wrap 属性定义，如果一条轴线排不下，如何换行。

它可能取三个值：

• nowrap（默认）：不换行。

• wrap：换行，第一行在上方。

• wrap-reverse：换行，第一行在下方。

flex-flow

flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap。

justify-content 属性

justify-content 属性定义了项目在主轴上的对齐方式。

.box {

  justify-content: flex-start | flex-end | center | space-between | space-around;

}

它可能取 5 个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右：

• flex-start（默认值）：左对齐。

• flex-end：右对齐。

• center： 居中。

• space-between：两端对齐，项目之间的间隔都相等。

• space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items 属性

align-items 属性定义项目在交叉轴上如何对齐。

它可能取 5 个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下：

• flex-start：交叉轴的起点对齐。

• flex-end：交叉轴的终点对齐。

• center：交叉轴的中点对齐。

• baseline：项目的第一行文字的基线对齐。

• stretch（默认值）：如果项目未设置高度或设为 auto，将占满整个容器的高度。

align-content 属性

align-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

该属性可能取 6 个值：

• flex-start：与交叉轴的起点对齐。

• flex-end：与交叉轴的终点对齐。

• center：与交叉轴的中点对齐。

• space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

• space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

• stretch（默认值）：轴线占满整个交叉轴。

项目的属性

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

• order：定义项目的排列顺序。数值越小，排列越靠前，默认为 0。

• flex-grow：定义项目的放大比例，默认为 0，即如果存在剩余空间，也不放大。

• flex-shrink：定义了项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小。

• flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main size）。它的默认值为 auto，即项目的本来大小。

• flex：flex-grow、flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto。后两个属性可选。

• align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。默认值为 auto。

Grid 布局是什么

Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。号称是最强大的的 CSS 布局方案，是目前唯一一种 CSS 二维布局。利用 Grid 布局，我们可以轻松实现类似下图布局：

容器和项目

采用网格布局的区域，称为容器（container）。容器内部采用网格定位的子元素，称为项目（item）。

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

上面代码中，最外层的 <div> 元素就是容器，内层的三个 <div> 元素就是项目。

行和列

容器里面的水平区域称为行（row），垂直区域称为列（column）。

单元格

行和列的交叉区域，称为单元格（cell）。

正常情况下，n 行和 m 列会产生 n x m 个单元格。比如，3 行 3 列会产生 9 个单元格。

单元格

行和列的交叉区域，称为单元格（cell）。

正常情况下，n 行和 m 列会产生 n x m 个单元格。比如，3 行 3 列会产生 9 个单元格。

容器的属性

Grid 布局的属性分成两类。一类定义在容器上面，称为容器属性；另一类定义在项目上面，称为项目属性。这部分先介绍容器属性。

display 属性

display: grid; 指定一个容器采用网格布局。         

grid-template-columns 和 grid-template-rows 属性

容器指定了网格布局以后，接着就要划分行和列。grid-template-columns 属性定义每一列的列宽，grid-template-rows 属性定义每一行的行高。

auto-fill 关键字

有时，单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用 auto-fill 关键字表示自动填充。

auto-fill 关键字

有时，单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用 auto-fill 关键字表示自动填充。

auto-fill 关键字

有时，单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用 auto-fill 关键字表示自动填充。

minmax()

minmax() 函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。

auto 关键字

auto 关键字表示由浏览器自己决定长度。

网格线的名称

grid-template-columns 属性和 grid-template-rows 属性里面，还可以使用方括号，指定每一根网格线的名字，方便以后的引用。

row-gap、column-gap 和 gap 属性

row-gap 属性设置行与行的间隔（行间距），column-gap 属性设置列与列的间隔（列间距）。

gap 属性是 column-gap 和 row-gap 的合并简写形式  

 

grid-template-areas 属性

网格布局允许指定区域（area），一个区域由单个或多个单元格组成。

grid-auto-flow 属性

划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。

justify-items、align-items 和place-items` 属性

justify-items 属性设置单元格内容的水平位置（左中右），align-items 属性设置单元格内容的垂直位置（上中下）。

这两个属性的写法完全相同，都可以取下面这些值：

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

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

• center：单元格内部居中。

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

justify-content、align-content 和place-content` 属性

justify-content 属性是整个内容区域在容器里面的水平位置（左中右），align-content 属性是整个内容区域的垂直位置（上中下）。

这两个属性的写法完全相同，都可以取下面这些值：

• start：对齐容器的起始边框。

• end：对齐容器的结束边框。

• center：容器内部居中。

• stretch：项目大小没有指定时，拉伸占据整个网格容器。

• space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍。

• space-between：项目与项目的间隔相等，项目与容器边框之间没有间隔。

• space-evenly：项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。

place-content 属性是 align-content 属性和 justify-content 属性的合并简写形式

grid-auto-columns和 grid-auto-rows 属性

有时候，一些项目的指定位置，在现有网格的外部。比如网格只有 3 列，但是某一个项目指定在第 5 行。这时，浏览器会自动生成多余的网格，以便放置项目。

grid-auto-columns 属性和 grid-auto-rows 属性用来设置，浏览器自动创建的多余网格的列宽和行高。它们的写法与 grid-template-columns 和 grid-template-rows 完全相同。如果不指定这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高。

grid-template 和 grid 属性

grid-template 属性是 grid-template-columns、grid-template-rows 和 grid-template-areas 这三个属性的合并简写形式。

grid 属性是 grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow 这六个属性的合并简写形式。

项目的属性

项目的位置是可以指定的，具体方法就是指定项目的四个边框，分别定位在哪根网格线。

• grid-column-start属性：左边框所在的垂直网格线。

• grid-column-end属性：右边框所在的垂直网格线。

• grid-row-start属性：上边框所在的水平网格线。

• grid-row-end属性：下边框所在的水平网格线。