Table布局 flex布局 grid布局

在CSS中，有三种主要的布局方式：Table布局、Flex布局和Grid布局。

1. Table布局：

Table布局是通过创建一个表格来控制网页布局。表格的每一部分都可以通过行（<tr>）和列（<td>）进行控制。

HTML:

<table>
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
  </tr>
</table>

2. Flex布局：

Flex布局是一种更加灵活的布局方式，它可以使容器的子项在任何方向上排列，并且可以弹性地伸缩以填充可用空间。

HTML:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

CSS:

.flex-container {
  display: flex;
}

3. Grid布局：

Grid布局是一种基于网格的布局系统，它将容器分割成一系列的行和列，然后通过行和列的交叉定位子项。

HTML:

<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

CSS:

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
}

每种布局都有其优点和适用场景，例如，Flex布局在移动应用和响应式网页设计中非常流行，而Grid布局在创建复杂的网格布局时提供了更多的灵活性。