简介
flexiblegs-css 是一个基于 flexbox 实现的响应式布局框架，支持多种设备和浏览器，并提供了简单易用的样式类。它能够帮助前端开发者快速搭建适配各种屏幕尺寸的网页布局。
安装
使用 npm 安装 flexiblegs-css：
npm install flexiblegs-css
使用方法
引入样式
在 HTML 文件中引入 flexiblegs-css 样式文件：
<link rel="stylesheet" href="node_modules/flexiblegs-css/dist/flexiblegs.min.css">
响应式布局
在 HTML 中使用 flexiblegs-grid 类，可以实现响应式的网格布局：
<div class="flexiblegs-grid"> <div class="flexiblegs-col">1</div> <div class="flexiblegs-col">2</div> <div class="flexiblegs-col">3</div> </div>
上面的代码创建了一个包含三列的网格布局。默认情况下，每一列的宽度都是相等的，可以通过添加不同的样式类来改变它们的宽度。
列宽度
使用 flexiblegs-half, flexiblegs-third 和 flexiblegs-quarter 类来设置列的宽度为二分之一、三分之一和四分之一：
-- -------------------- ---- ------- ---- ------------------------ ---- --------------------- ------------------------ ---- --------------------- ------------------------ ------ ---- ------------------------ ---- --------------------- ------------------------- ---- --------------------- ------------------------- ---- --------------------- ------------------------- ------ ---- ------------------------ ---- --------------------- --------------------------- ---- --------------------- --------------------------- ---- --------------------- --------------------------- ---- --------------------- --------------------------- ------
响应式列宽度
使用 flexiblegs-col-md, flexiblegs-col-sm 和 flexiblegs-col-xs 类来设置列在不同屏幕尺寸下的宽度。默认情况下，列的宽度在所有屏幕尺寸下都相等。
<div class="flexiblegs-grid"> <div class="flexiblegs-col flexiblegs-col-md-8 flexiblegs-col-sm-6 flexiblegs-col-xs-4">1</div> <div class="flexiblegs-col flexiblegs-col-md-4 flexiblegs-col-sm-6 flexiblegs-col-xs-8">2</div> </div>
上面的代码中，列在大屏幕下宽度为 8/12，中等屏幕下宽度为 6/12，小屏幕下宽度为 4/12。另一列在大屏幕下宽度为 4/12，中等屏幕下宽度为 6/12，小屏幕下宽度为 8/12。
偏移
使用 flexiblegs-offset-* 类来设置列的偏移量：
<div class="flexiblegs-grid"> <div class="flexiblegs-col flexiblegs-col-md-6 flexiblegs-offset-md-3">1</div> </div>
上面的代码创建了一个列，在大屏幕下宽度为 6/12，偏移量为 3/12。
排序
使用 flexiblegs-order-* 类来调整列的显示顺序：
<div class="flexiblegs-grid"> <div class="flexiblegs-col flexiblegs-col-md-6 flexible > 来源：[JavaScript中文网](https://www.javascriptcn.com/post/38982) ，转载请注明来源 [https://www.javascriptcn.com/post/38982](https://www.javascriptcn.com/post/38982)