流式布局（Block‐level）概念 - daniel-qa/Vue GitHub Wiki

流式布局（Block-level）概念

在 CSS 中，流式布局（Flow Layout） 是指元素在页面中按照文档流（document flow）依次排列。元素的布局通常按照以下几种方式进行：

  • 1 . 块级布局（Block-level Layout）：元素会占据整个行的宽度，后续的元素会在其下方开始，通常具有上下外边距（margin）。

  • 2 . 内联布局（Inline Layout）：元素不会占据整行宽度，而是根据内容自适应宽度，多个内联元素可以在同一行内水平排列。

块级元素（Block-level elements），例如 < div>、< p>、< h1> 等，在页面中按顺序垂直排列。每个块级元素默认会占据一整行。

Vue 组件中的布局： 和 type="flex"

在 Element Plus 中， 组件是一个栅格容器，默认情况下，它的布局是基于 流式布局（block-level） 的，也就是每个 el-col 组件都会依照顺序占据一个新的“行”。

这种默认的流式布局行为使得每个 el-col 组件会占据容器的全宽，或者根据其 span 属性的值来设置占据的列数。

然而，当你为 设置 type="flex" 时，Flexbox 布局 被启用，变为 灵活的弹性布局，这时元素的对齐方式和排列方式由 Flexbox 决定，而不再是简单的流式排列。

流式布局与 Flexbox 布局的区别

  • 1 .流式布局（默认的 block-level）:

元素会根据文档流从上到下按顺序排列。 每个 el-col 会默认占据一定的空间并且垂直排列。 栅格系统（span）决定每个列占据的宽度，默认是 24 格栅格。

  • 2 .Flexbox 布局（使用 type="flex"）:

启用后，容器内的元素会根据 Flexbox 的属性进行排列。 justify 和 align 等属性可以控制主轴和交叉轴的对齐方式。 容器内的元素可以水平排列、垂直居中等。

例子：默认流式布局（block-level）

<el-row :gutter="20">
  <el-col :span="6">
    <div class="grid-content bg-purple">Column 1</div>
  </el-col>
  <el-col :span="6">
    <div class="grid-content bg-purple">Column 2</div>
  </el-col>
  <el-col :span="6">
    <div class="grid-content bg-purple">Column 3</div>
  </el-col>
  <el-col :span="6">
    <div class="grid-content bg-purple">Column 4</div>
  </el-col>
</el-row>

3. 的 Flex 布局

当我们在 上使用 type="flex" 时，Flexbox 布局会启用，允许更灵活的元素排列。

<el-row type="flex" justify="center" align="middle" :gutter="20">
  <el-col :span="6">
    <div class="grid-content bg-purple">Column 1</div>
  </el-col>
  <el-col :span="6">
    <div class="grid-content bg-purple">Column 2</div>
  </el-col>
  <el-col :span="6">
    <div class="grid-content bg-purple">Column 3</div>
  </el-col>
  <el-col :span="6">
    <div class="grid-content bg-purple">Column 4</div>
  </el-col>
</el-row>

4. 默认行为和 Flexbox 布局

  • 默认的流式布局：

每个 el-col 默认会占据一个新的行，排列顺序从上到下。 如果你不指定 type="flex"，那么 会将每个 el-col 作为 块级元素 排列。

启用 type="flex" 后：

使用 Flexbox 布局后， 的排列方式就不再是传统的流式排列，它可以根据 justify 和 align 属性来实现更灵活的排列。 justify: 控制水平对齐，常见的值有 start, center, space-between, space-around 等。 align: 控制垂直对齐，常见的值有 top, middle, bottom 等。

总结

  • 流式布局（block-level）：是默认布局，元素按照文档流从上到下排列，每个元素会占据一整行的宽度。

  • Flexbox 布局：通过 type="flex" 启用，提供了更强大的对齐和排列能力，元素不再按顺序流动排列，可以控制排列的方向和对齐方式。

⚠️ **GitHub.com Fallback** ⚠️