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