神奇的flex,用flex實現bootstrap的柵格佈局
阿新 • • 發佈：2018-12-24
<html> <head> <meta charset="UTF-8"> <title> </title> </head> <style> .contaier div{ background-color: : green; border: 1px solid #000; box-sizing: border-box; width: 100%; display: flex; flex-wrap: wrap; } .col_50{ flex: 0 0 25%; } .col_30{ flex: 0 0 33.3%; } .col_60{ flex: 0 0 50%; } </style> <body> <div class="contaier"> <div > <div class="col_50"> 1 </div> <div class="col_50"> 1 </div> <div class="col_50"> 1 </div> <div class="col_50"> 1 </div> <div class="col_30"> 1 </div> <div class="col_30"> 1 </div> <div class="col_30"> 1 </div> <div class="col_60"> 1 </div> <div class="col_60"> 1 </div> </div> </div> </body> </html>
詳細的flex講解：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html