## flex版栅格布局
> 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
Bootstrap 是把row分为12格，你需要决定你要用的区块占多少格，如果一行超过12格将会另起一行。显然这有两个缺点：
1. 如果想要五等分是办不到的 12 / 5 = 2.22，表示每个等分块占 2.22 个格子，但格子是不可再分的，不可能存在半个格子，所以这就办不到。每个块只能占 被12整除的格子数，如 1 2 3 4 6 12
2. 我希望三等分，要自己先计算出每一块需要四个格子，然后写 col-*-4，这样每次都多了一次计算
而flex 根本不是格子的概念，而是 你希望块占row的比例，c-2表示占 1/2，即一半，而不需要你去计算这需要多少个格子，你只需要说你要多少比例就行。
```css
/* flex栅格布局 */
.container,
.container-fluid {
padding-left: 15px;
padding-right: 15px;
width: 100%;
margin: auto;
}
.row {
display: flex;
flex-wrap: wrap;
margin-left: -15px;
margin-right: -15px;
}
[class*=col-] {
padding-left: 15px;
padding-right: 15px;
}
[class*=visible-] {
display: none;
}
[class*=hidden-] {
display: block;
}
/* 手机（移动优先） */
.visible-xs {
display: block;
}
.hidden-xs {
display: none;
}
.col-xs-1 {
flex: 0 0 100%;
width: 100%;
}
.col-xs-0,
.col-xs-full {
flex: 1;
width: auto;
}
.col-xs-2 {
flex: 0 0 50%;
/* 解决嵌套时的问题 */
width: 50%;
}
.col-xs-3 {
flex: 0 0 33.3333%;
width: 33.3333%;
}
.col-xs-4 {
flex: 0 0 25%;
width: 25%;
}
.col-xs-5 {
flex: 0 0 20%;
width: 20%;
}
.col-xs-6 {
flex: 0 0 16.6666%;
width: 16.6666%;
}
.col-xs-7 {
flex: 0 0 14.2857%;
width: 14.2857%;
}
.col-xs-8 {
flex: 0 0 12.5%;
width: 12.5%;
}
.col-xs-9 {
flex: 0 0 11.1111%;
width: 11.1111%;
}
.col-md-10 {
flex: 0 0 10%;
width: 10%;
}
/* 平板 */
@media (min-width: 768px) {
.container {
max-width: 750px;
}
.visible-sm {
display: block;
}
.hidden-sm {
display: none;
}
.col-sm-1 {
flex: 0 0 100%;
width: 100%;
}
.col-sm-0,
.col-sm-full {
flex: 1;
width: auto;
}
.col-sm-2 {
flex: 0 0 50%;
width: 50%;
}
.col-sm-3 {
flex: 0 0 33.3333%;
width: 33.3333%;
}
.col-sm-4 {
flex: 0 0 25%;
width: 25%;
}
.col-sm-5 {
flex: 0 0 20%;
width: 20%;
}
.col-sm-6 {
flex: 0 0 16.6666%;
width: 16.6666%;
}
.col-sm-7 {
flex: 0 0 14.2857%;
width: 14.2857%;
}
.col-sm-8 {
flex: 0 0 12.5%;
width: 12.5%;
}
.col-sm-9 {
flex: 0 0 11.1111%;
width: 11.1111%;
}
.col-sm-10 {
flex: 0 0 10%;
width: 10%;
}
}
/* 中等屏幕 */
@media (min-width: 992px) {
.container {
max-width: 970px;
}
.visible-md {
display: block;
}
.hidden-md {
display: none;
}
.col-md-1 {
flex: 0 0 100%;
width: 100%;
}
.col-md-0,
.col-md-full {
flex: 1;
width: auto;
}
.col-md-2 {
flex: 0 0 50%;
width: 50%;
}
.col-md-3 {
flex: 0 0 33.3333%;
width: 33.3333%;
}
.col-md-4 {
flex: 0 0 25%;
width: 25%;
}
.col-md-5 {
flex: 0 0 20%;
width: 20%;
}
.col-md-6 {
flex: 0 0 16.6666%;
width: 16.6666%;
}
.col-md-7 {
flex: 0 0 14.2857%;
width: 14.2857%;
}
.col-md-8 {
flex: 0 0 12.5%;
width: 12.5%;
}
.col-md-9 {
flex: 0 0 11.1111%;
width: 11.1111%;
}
.col-md-10 {
flex: 0 0 10%;
width: 10%;
}
}
/* 大屏 */
@media (min-width: 1200px) {
.container {
max-width: 1170px;
}
.visible-lg {
display: block;
}
.hidden-lg {
display: none;
}
.col-lg-1 {
flex: 0 0 100%;
width: 100%;
}
.col-lg-0,
.col-lg-full {
flex: 1;
width: auto;
}
.col-lg-2 {
flex: 0 0 50%;
width: 50%;
}
.col-lg-3 {
flex: 0 0 33.3333%;
width: 33.3333%;
}
.col-lg-4 {
flex: 0 0 25%;
width: 25%;
}
.col-lg-5 {
flex: 0 0 20%;
width: 20%;
}
.col-lg-6 {
flex: 0 0 16.6666%;
width: 16.6666%;
}
.col-lg-7 {
flex: 0 0 14.2857%;
width: 14.2857%;
}
.col-lg-8 {
flex: 0 0 12.5%;
width: 12.5%;
}
.col-lg-9 {
flex: 0 0 11.1111%;
width: 11.1111%;
}
.col-lg-10 {
flex: 0 0 10%;
width: 10%;
}
}
@media (min-width: 1300px) {
.container {
max-width: 1200px;
}
}
@media (min-width: 1400px) {
.container {
max-width: 1300px;
}
}
@media (min-width: 1500px) {
.container {
max-width: 1400px;
}
}
@media (min-width: 1600px) {
.container {
max-width: 1500px;
}
}
/* 超大屏幕 */
@media (min-width: 2200px) {}
/* 打印控制 */
.visible-print {
display: none;
}
.hidden-print {
display: initial;
}
@media print {
.visible-print {
display: initial;
}
.hidden-print {
display: none;
}
}
```
样式类名 与 [Bootstrap](https://v3.bootcss.com/css) 一致
----
### 扩展
[全局 CSS 样式 · Bootstrap v3 中文文档 - 栅格系统](https://v3.bootcss.com/css/#grid)
[Flex 布局教程：语法篇 - 阮一峰的网络日志](http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html)
[Flex 布局教程：实例篇 - 阮一峰的网络日志](http://www.ruanyifeng.com/blog/2015/07/flex-examples.html)
----
last update: 2020-05-04 15:37
- 开始
- 微信小程序
- 获取用户信息
- 记录
- HTML
- HTML5
- 文档根节点
- 你真的了解script标签吗？
- 文档结构
- 已经落后的技术
- form表单
- html实体
- CSS
- css优先级 & 设计模式
- 如何编写高效的 CSS 选择符
- 笔记
- 小计
- flex布局
- 细节体验
- Flex
- Grid
- tailwindcss
- JavaScript
- javascript物语
- js函数定义
- js中的数组对象
- js的json解析
- js中数组的操作
- js事件冒泡
- js中的判断
- js语句声明会提前
- cookie操作
- 关于javascript你要知道的
- 关于innerHTML的试验
- js引擎与GUI引擎是互斥的
- 如何安全的修改对象
- 当渲染引擎遇上强迫症
- 不要使用连相等
- 修改数组-对象
- 算法-函数
- 事件探析
- 事件循环
- js事件循环中的上下文和作用域的经典问题
- Promise
- 最佳实践
- 页面遮罩加载效果
- 网站静态文件之思考
- 图片加载问题
- 路由及转场解决方案
- web app
- 写一个页面路由转场的管理工具
- 谈编程
- 技术/思想的斗争
- 前端技术选型分析
- 我想放点html模板代码
- 开发自适应网页
- 后台前端项目的开发
- 网站PC版和移动版的模板方案
- 前后端分离
- 淘宝前后端分离
- 前后端分离的思考与实践（一）
- 前后端分离的思考与实践（二）
- 前后端分离的思考与实践（三）
- 前后端分离的思考与实践（四）
- 前后端分离的思考与实践（五）
- 前后端分离的思考与实践（六）
- 动画
- 开发小技巧
- Axios
- 屏幕适配
- 理论基础
- 思考
- flexible.js原理
- 实验
- rem的坑，为什么要设置成百分比，为什么又是62.5%
- 为什么以一个标准适配的，其它宽度也能同等适配
- 自适应、响应式、弹性布局、屏幕适配
- 适配：都用百分比？
- 番外篇
- 给你看看0.5px长什么样？
- 用事实证明viewport scale缩放不会改变rem元素的大小
- 为什么PC端页面缩放不会影响rem元素
- 究竟以哪个为设备独立像素
- PC到移动端初试
- 深入理解px
- 响应式之栅格系统
- 深入理解px（二）
- 一篇搞定移动端适配
- flex版栅格布局
- 其他
- 浏览器加载初探
- 警惕你的开发工具
- JS模块化
- webpack
- 打包原理
- 异步加载
- gulp
- 命名规范
- 接口开发
- sea.js学习
- require.js学习
- react学习
- react笔记
- vue学习
- vue3
- 工具、技巧
- 临时笔记
- 怎么维护好开源项目
- 待办
- 对前端MVV*C框架的思考
- jquery问题
- 临时
- 好文
- 节流防抖