基础 CSS 厨房水槽 Flex Grid

简介

Flex Grid 是一种 CSS 布局系统，它使用弹性布局技术（flexbox）和网格布局技术（grid）来实现灵活的响应式布局。

使用方法

安装

在你的 HTML 文件中引入 Flex Grid 的 CSS 文件：

<link rel="stylesheet" href="path/to/flexgrid.css">

布局

Flex Grid 使用的是类似于 Bootstrap 的 12 格系统，可以用 .col-xx-x 类来指定元素在不同屏幕尺寸下占用的格数，例如：

<div class="container">
  <div class="row">
    <div class="col-md-6 col-lg-4">...</div>
    <div class="col-md-6 col-lg-8">...</div>
  </div>
</div>

上面的例子中，第一个 div 元素占用了在中等和大型屏幕上的 6 格（即半屏），在小型屏幕上默认占用整个屏幕；第二个 div 元素占用了在中等和大型屏幕上的 8 格（即 2/3 屏），在小型屏幕上默认占用整个屏幕。

对齐

可以用 .align-(items|self)-(start|center|end|stretch) 类来指定元素在父容器中的对齐方式，例如：

<div class="container align-items-center">
  <div class="row">
    <div class="col-4">...</div>
    <div class="col-4">...</div>
    <div class="col-4">...</div>
  </div>
</div>

上面的例子中，.align-items-center 指定了行内元素在容器中垂直居中对齐。

响应式

Flex Grid 支持响应式布局，可以用 .col-(xs|sm|md|lg|xl)-x 类来指定元素在不同屏幕尺寸下占用的格数，例如：

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-md-6 col-lg-8">...</div>
    <div class="col-xs-12 col-md-6 col-lg-4">...</div>
  </div>
</div>

上面的例子中，第一个 div 元素在小型屏幕上占用整个屏幕，在中等和大型屏幕上占用 6 格和 8 格；第二个 div 元素在小型屏幕上占用整个屏幕，在中等和大型屏幕上占用 6 格和 4 格。

示例

以下是一个基础的示例：

<div class="container">
  <div class="row align-items-center">
    <div class="col-4 col-sm-6 col-lg-8">...</div>
    <div class="col-4 col-sm-6 col-lg-4">...</div>
  </div>
  <div class="row align-items-center">
    <div class="col-12 col-md-8">...</div>
    <div class="col-12 col-md-4">...</div>
  </div>
  <div class="row align-items-center">
    <div class="col-6 col-md-4">...</div>
    <div class="col-6 col-md-4">...</div>
    <div class="col-12 col-md-4">...</div>
  </div>
</div>

示例中使用了 .container 和 .row 来定义容器和行，使用 .col-*-* 类来定义列，使用 .align-items-center 来垂直居中行内元素。在不同屏幕尺寸下，列的宽度将自动调整。