1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Flex布局</title> 8 <style> 9 .con { 10 /* 要創建一個 flex 容器，只需要將一個 display: flex 屬性添加到一個元素上。*/ 11 /* 默認情況下，所有的直接子元素都被認為是 flex 項，並從左到右依次排列在一行中。*/ 12 /*如果 flex 項的寬度總和大於容器，那么 flex 項將按比例縮小，直到它們適應 flex 容器寬度*/ 13 display: flex; 14 /* flex-direction 決定主軸的方向 row(默認)|row-reverse|column|column-reverse*/ 15 /* flex-direction: row; */ 16 /* flex-wrap決定當排列不下時是否換行以及換行的方式,nowrap(默認)|wrap|wrap-reverse */ 17 /* flex-wrap:wrap; */ 18 /* flex-flow是lex-direction和flex-wrap的簡寫形式，如：row wrap|column wrap-reverse等。默認值為row nowrap，即橫向排列 不換行 */ 19 flex-flow: row wrap; 20 /* !當主軸沿水平方向時!justify-content,決定item在主軸上的對齊方式，可能的值有flex-start（默認），flex-end，center，space-between，space-around */ 21 justify-content: center; 22 /* !主軸水平時!決定了item在交叉軸上的對齊方式，可能的值有flex-start|flex-end|center|baseline|stretch */ 23 align-items: center; 24 } 25 26 .con > div { 27 width: 100px; 28 height: 100px; 29 background: #8DB6CD; 30 border: 1px solid black; 31 margin-left: 10px; 32 text-align: center; 33 line-height: 100px; 34 } 35 </style> 36 </head> 37 <body> 38 <div class='con'> 39 <!-- order的值是整數，默認為0，整數越小，item排列越靠前 這里只給item1 和item4設置了order屬性 1跟4排到了最后面，並且4在1的前面 --> 40 <div style="order: 2">item 1</div> 41 <div style="height: 300px;">item 2</div> 42 <!-- flex-grow定義了當flex容器有多余空間時，item是否放大 flex-shrink為縮小 --> 43 <div style="flex-grow:2">item 3</div> 44 <div style="order: 1">item 4</div> 45 <div style="flex-basis:60px">item 5</div> 46 <div>item 6</div> 47 <div>item 7</div> 48 <div>item 8</div> 49 <div>item 9</div> 50 <div>item 10</div> 51 <div>item 11</div> 52 </div> 53 </body> 54 </html>