## 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問題
- 臨時
- 好文
- 節流防抖