之前被人問到如果有一個div里面有多個小的div 如何做到縮小頁面的時候實現小div的換行，首先我想到的其實是bootstrap里的柵格化布局。后來才想到CSS3還有這么一個屬性。現在跟大家分享一下。
源碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Flex布局</title> <style> .con { /* 要創建一個 flex 容器，只需要將一個 display: flex 屬性添加到一個元素上。 默認情況下，所有的直接子元素都被認為是 flex 項，並從左到右依次排列在一行中。 如果 flex 項的寬度總和大於容器，那么 flex 項將按比例縮小，直到它們適應 flex 容器寬度 */ display: flex; /* flex-direction 決定主軸的方向 row(默認)|row-reverse|column|column-reverse*/ /* flex-direction: row; */ /* flex-wrap決定當排列不下時是否換行以及換行的方式,nowrap(默認)|wrap|wrap-reverse */ /* flex-wrap:wrap; */ /* flex-flow是lex-direction和flex-wrap的簡寫形式，如：row wrap|column wrap-reverse等。默認值為row nowrap，即橫向排列 不換行 */ flex-flow:row wrap; /* !當主軸沿水平方向時!justify-content,決定item在主軸上的對齊方式，可能的值有flex-start（默認），flex-end，center，space-between，space-around */ justify-content:center; /* !主軸水平時!決定了item在交叉軸上的對齊方式，可能的值有flex-start|flex-end|center|baseline|stretch */ align-items:center; } .con>div { width: 100px; height: 100px; background: #8DB6CD; border: 1px solid black; margin-left: 10px; text-align: center; line-height:100px; } </style> </head> <body> <div class='con'> <!-- order的值是整數，默認為0，整數越小，item排列越靠前 這里只給item1 和item4設置了order屬性 1跟4排到了最后面，並且4在1的前面 --> <div style="order: 2">item 1</div> <div style="height: 300px;">item 2</div> <!-- flex-grow定義了當flex容器有多余空間時，item是否放大 flex-shrink為縮小 --> <div style="flex-grow:2">item 3</div> <div style="order: 1">item 4</div> <div style="flex-basis:60px">item 5</div> <div>item 6</div> <div>item 7</div> <div>item 8</div> <div>item 9</div> <div>item 10</div> <div>item 11</div> </div> </body> </html>
如有不足，請多指教
參考鏈接：
Felx布局總結：https://www.cnblogs.com/nuannuan7362/p/5823381.html
10分鍾學會基本的Flex布局：http://www.css88.com/archives/7760
Felx布局：語法篇：https://blog.csdn.net/u011300580/article/details/56011564
Bootstrap柵格系統(布局)：https://www.cnblogs.com/chessYu/p/7337018.html
Bootstrap官網：https://v3.bootcss.com/css/