在前端开发中，布局一直是一个重要的问题。随着越来越多的设备尺寸，响应式和灵活性的要求，使得我们必须采用更好的布局方案。其中，CSS flexbox 逐渐成为了一个非常好的用于布局的方案，由此而生的 css-flexy-grid 就得到了广泛使用。
什么是 css-flexy-grid？
css-flexy-grid 是一个用于网格布局的 CSS 框架，使用基于 flexbox 的方法进行布局。它支持响应式网格、可嵌套的子网格、自适应列宽、各种对齐方式等等。同样，它还提供了丰富的样式类和原子类供我们使用。
安装和使用
安装
你可以通过 npm 进行 css-flexy-grid 的安装，也可以直接从 Github 上下载源码包。
npm install css-flexy-grid
引入并使用
安装完成后，在你的 HTML 中引入 css-flexy-grid 的 CSS 文件即可开始使用。
<link rel="stylesheet" href="node_modules/css-flexy-grid/css/flexy.css">
之后，你可以在需要使用网格布局的地方加上相应的 class 即可使用。
<div class="row"> <div class="col-6">.col-6</div> <div class="col-6">.col-6</div> </div>
上面的例子中，我们通过 row 和 col-6 两个 class 来实现一个简单的两栏布局。
样式类和用法
css-flexy-grid 有大量的样式类可以供我们使用，下面来介绍常用的几个。
row 和 col
row 和 col 是使用最广泛的两个样式类。row 用于包含每一行的网格内容，col 用于表示列。我们可以为 col 设定不同的列宽。
<div class="row"> <div class="col-6">.col-6</div> <div class="col-6">.col-6</div> </div>
可嵌套的网格
在 css-flexy-grid 中，我们可以使用子 row 和 col 来嵌套不同的网格。这样，我们就可以在一个大的网格中创建多个小的网格。
<div class="row">
<div class="col-6">
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
</div>自适应列宽
css-flexy-grid 还支持自适应的列宽，只需要给 col 一个特殊的 class。这将使它成为一个可以根据内容自适应宽度的元素。
<div class="row"> <div class="col-auto">.col-auto</div> <div class="col-auto">.col-auto</div> </div>
对齐方式
在 css-flexy-grid 中，我们可以使用不同的对齐方式，在 row 和 col 上使用 justify-* 和 align-* class。
<div class="row justify-start"> <div class="col-3">.col-3</div> <div class="col-3">.col-3</div> <div class="col-3">.col-3</div> </div>
上面的例子中，我们使用了 justify-start 来将三个 col 使用左对齐方式进行排列。
总结
css-flexy-grid 是一个非常实用的 CSS 框架，它可以帮助我们高效的完成网格布局，并提供了大量的样式类供我们使用。本篇文章介绍了该框架的基本用法和常用样式类，希望能帮助大家更好地掌握 css-flexy-grid 的使用方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600559e281e8991b448d7777