flex 和 grid 布局对比

设置完 flex 之后, 元素有点像 inline-block, 但是设置完 grid, 元素还是像 block 的状态。

下面代码都使用 tailwindcss 来布局。

一. 项目一排

• flex 设置 flex
• grid 设置 grid grid-flow-col

<template>
  <!-- flex -->
  <div class="flex">
    <div class="size-20 bg-red-600"></div>
    <div class="size-10 bg-yellow-300"></div>
  </div>
  <!-- grid -->
  <div class="grid grid-flow-col">
    <div class="size-20 bg-red-600"></div>
    <div class="size-10 bg-yellow-300"></div>
  </div>
</template>

1.1 项目在左侧, 中间, 右侧

设置 justify-start, justify-center, justify-end

2.1 项目垂直居中

设置 items-center

二. 项目两排

• flex 设置 flex flex-col
• grid 设置 grid

<template>
  <!-- flex -->
  <div class="flex flex-col">
    <div class="size-20 bg-red-600"></div>
    <div class="size-10 bg-yellow-300"></div>
  </div>
  <!-- grid -->
  <div class="grid">
    <div class="size-20 bg-red-600"></div>
    <div class="size-10 bg-yellow-300"></div>
  </div>
</template>

2.1 项目在左侧, 中间, 右侧

• flex 设置 items-start(默认), items-center, items-end
• grid 设置 justify-items-start(默认), justify-items-center, justify-items-end

2.2 grid 支持整体移动, flex 不行

• grid 支持整体居中, 内容居左 justify-center
• grid 支持整体居右, 内容居左 justify-end

三. 项目垂直居中, 整体内容居左

这种时需要 flex 和 grid 都包一层 div

<template>
  <!-- flex -->
  <div class="flex">
    <div class="flex flex-col items-center">
      <div class="size-20 bg-red-600"></div>
      <div class="size-10 bg-yellow-300"></div>
    </div>
  </div>

  <!-- grid -->
  <div class="grid grid-cols-[auto_1fr]">
    <div class="grid justify-items-center">
      <div class="size-20 bg-red-600"></div>
      <div class="size-10 bg-yellow-300"></div>
    </div>
  </div>
</template>