簡單的flex 響應式佈局
阿新 • • 發佈：2018-12-13
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Title</title> <style> ul{ display: flex; /*外部容器設定為flex佈局 內部才能進行佈局操作*/ flex-direction: row;/*表示元素的走向*/ flex-wrap:wrap;/*宣告元素是否換行*/ /* 在橫軸上的對齊方式 * |flex-start:左對齊|flex-end:右對齊|center:橫向居中對齊|space-between:左右兩端對齊|space-around:同行元素間距相等| * (只有在不設定 flex-grow 時才起作用) */ justify-content: space-around; /* 在縱軸上的對齊方式 * |flex-start:上對齊|flex-end:下對齊|center:縱向居中對齊|baseline:專案的第一行文字的基線對齊|stretch:[預設]| * (只有在元素和元素的高度不一樣時才體現出來) */ align-items:stretch; /* * 軸線對齊方式 * flex-start：與交叉軸的起點對齊。 * flex-end：與交叉軸的終點對齊。 * center：與交叉軸的中點對齊。 * space-between：與交叉軸兩端對齊，軸線之間的間隔平均分佈。 * space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。 */ align-content:space-around; list-style-type:none; padding:0; } li{ height:300px; /* flex-grow屬性定義專案的放大比例，預設為0，即如果存在剩餘空間，也不放大。如果所有專案的flex-grow屬性都為1， 則它們將等分剩餘空間（如果有的話）。如果一個專案的flex-grow屬性為2，其他專案都為1，則前者佔據的剩餘空間將比其他項多一倍。*/ flex-grow:1; text-align: center; margin:15px; border: 1px solid red; background: #c6c7c9; } .lio{ /*width:300px;*/ /*height: 300px;*/ /*flex-basis屬性定義了在分配多餘空間之前，專案佔據的主軸空間（main size）。瀏覽器根據這個屬性,計算主軸是否有多餘空間。 它的預設值為auto，即專案的本來大小。它可以設為跟width或height屬性一樣的值（比如350px），則專案將佔據固定空間。*/ flex-basis:300px; /*order: 2; !*表示元素的顯示,和 z-index 的原理差不多,這個是用來控制元素排列順序先後,不同的是數值越小排列越靠前*!*/ } .liw{ /*width:600px;*/ /*height:600px;*/ flex-basis:600px; /*order: 1; !*表示元素的顯示,和 z-index 的原理差不多,這個是用來控制元素排列順序先後,不同的是數值越小排列越靠前*!*/ } </style> </head> <body> <ul> <li class="lio">1</li> <li class="liw">2</li> <li class="lio">3</li> <li class="liw">4</li> <li class="lio">5</li> <li class="liw">6</li> <li class="lio">7</li> <li class="liw">8</li> <li class="lio">9</li> <li class="liw">10</li> <li class="lio">11</li> <li class="liw">12</li> <li class="lio">13</li> <li class="liw">14</li> </ul> </body> </html>