在前端开发中，我们常常需要使用栅格布局来实现页面的布局。ember-flexboxgrid-sass 就是一个方便的 npm 包，提供了基于 Flexbox 布局的栅格布局，使得页面布局更加灵活和方便。本文将介绍如何使用该 npm 包。
安装与配置
首先，我们需要在项目中安装 ember-flexboxgrid-sass，可以通过以下命令进行安装：
$ npm install ember-flexboxgrid-sass --save-dev
安装好后，我们还需要对 Ember 应用进行一些配置，以便引入该 npm 包。在 app/styles/app.scss 文件中添加以下内容：
@import "ember-flexboxgrid";
这将会对项目中的所有页面使用 flexbox 栅格系统。如果需要对某些页面使用 block-grid 样式，需要修改 app.scss 文件，并在 app/associations.js 文件中进行配置。具体可以参考 官方文档。
使用
安装和配置完成后，我们就可以在页面中使用了。
栅格系统
ember-flexboxgrid-sass 提供了类似 Bootstrap 的栅格布局，但是它使用了 Flexbox 结构，使得布局更加灵活。
使用栅格布局的代码示例：
<div class="row"> <div class="col-xs-6 col-sm-4">...</div> <div class="col-xs-6 col-sm-4">...</div> <div class="col-xs-6 col-sm-4">...</div> </div>
其中，.row 类用来定义行，.col-[size]-[width] 类用来定义列。其中 [size] 表示屏幕大小，[width] 表示列宽，可以是 1-12 的数字。屏幕大小包括：xs(Extra Small)、sm(Small)、md(Medium)、lg(Large) 等。
偏移
除了基本的栅格系统，ember-flexboxgrid-sass 还提供了偏移功能，可以在页面的栅格布局中左右偏移列元素。偏移列元素的代码示例：
<div class="row"> <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-4">...</div> </div>
其中，.col-[size]-offset-[width] 类用来定义列偏移。其中 [size] 表示屏幕大小，[width] 表示偏移宽度，可以是 1-11 的数字。
媒体查询
由于 ember-flexboxgrid-sass 使用了媒体查询，我们可以根据不同的屏幕大小来定义不同的样式。以下示例代码中，当屏幕大小为小屏或中屏时，列宽为 6；当屏幕大小为大屏时，列宽为 4：
<div class="row"> <div class="col-sm-6 col-md-6 col-lg-4">...</div> </div>
响应式元素
在页面中，我们常常需要对不同的屏幕大小采用不同的元素。ember-flexboxgrid-sass 提供了方便的类名，可以根据屏幕大小进行控制。以下示例代码中，当屏幕大小为小屏或中屏时，被隐藏；当屏幕大小为大屏时，显示：
<div class="visible-lg">...</div> <div class="hidden-md hidden-xs">...</div>
总结
ember-flexboxgrid-sass 是一个非常方便的 npm 包，使得前端开发人员可以更加方便地实现灵活的页面布局效果。在使用时，需要注意各个类名的用法及其在不同屏幕大小下的表现。同时，需要注意该 npm 包可能会和项目中的其他样式发生冲突，需要根据具体情况进行调整。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e17a563576b7b1ecaaf