伸縮佈局
1. 使用：
display: flex;
flex: 2; /*可以自由設置佔據份數*/
min-width: 200px; /*限制寬度不被擠壓太多*/
max-width: 500px; /*限制最大寬度*/
2. 排列方向：
flex-direction: row; //默認水平
flex-direction: row-reverse; //水平排列，反向
flex-direction: clumn; //排列方式垂直
flex-direction: clumn-reverse; //垂直排列，反向
3. justify-content
文檔：https://www.runoob.com/cssref/css3-pr-justify-content.html
屬性值
| 值 | 描述 | 測試 |
|---|---|---|
| flex-start | 默認值。項目位於容器的開頭。 | 測試 » |
| flex-end | 項目位於容器的結尾。 | 測試 » |
| center | 項目位於容器的中心。 | 測試 » |
| space-between | 項目位於各行之間留有空白的容器內。 | 測試 » |
| space-around | 項目位於各行之前、之間、之後都留有空白的容器內。 | 測試 » |
| initial | 設置該屬性爲它的默認值。請參閱 initial。 | 測試 » |
| inherit | 從父元素繼承該屬性。請參閱 inherit。 |
4. align-items 調整側軸對齊
https://www.runoob.com/cssref/css3-pr-align-items.html
屬性值
| 值 | 描述 | 測試 |
|---|---|---|
| stretch |
默認值。元素被拉伸以適應容器。 如果指定側軸大小的屬性值爲'auto'，則其值會使項目的邊距盒的尺寸儘可能接近所在行的尺寸，但同時會遵照'min/max-width/height'屬性的限制。 |
測試 » |
| center |
元素位於容器的中心。 彈性盒子元素在該行的側軸（縱軸）上居中放置。（如果該行的尺寸小於彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度）。 |
測試 » |
| flex-start |
元素位於容器的開頭。 彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。 |
測試 » |
| flex-end |
元素位於容器的結尾。 彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。 |
測試 » |
| baseline |
元素位於容器的基線上。 如彈性盒子元素的行內軸與側軸爲同一條，則該值與'flex-start'等效。其它情況下，該值將參與基線對齊。 |
測試 » |
| initial | 設置該屬性爲它的默認值。請參閱 initial。 | 測試 » |
| inherit | 從父元素繼承該屬性。請參閱 inherit。 |
5. flex-wrap 控制是否換行
https://www.runoob.com/cssref/css3-pr-flex-wrap.html
屬性值
| 值 | 描述 |
|---|---|
| nowrap | 默認值。規定靈活的項目不拆行或不拆列。 |
| wrap | 規定靈活的項目在必要的時候拆行或拆列。 |
| wrap-reverse | 規定靈活的項目在必要的時候拆行或拆列，但是以相反的順序。 |
| initial | 設置該屬性爲它的默認值。請參閱 initial。 |
| inherit | 從父元素繼承該屬性。請參閱 inherit。 |
6. align-content 堆棧(由flex-wrap產生的獨立行)對齊
https://www.runoob.com/cssref/css3-pr-align-content.html
| 值 | 描述 | 測試 |
|---|---|---|
| stretch |
默認值。元素被拉伸以適應容器。 各行將會伸展以佔用剩餘的空間。如果剩餘的空間是負數，該值等效於'flex-start'。在其它情況下，剩餘空間被所有行平分，以擴大它們的側軸尺寸。 |
測試 » |
| center |
元素位於容器的中心。 各行向彈性盒容器的中間位置堆疊。各行兩兩緊靠住同時在彈性盒容器中居中對齊，保持彈性盒容器的側軸起始內容邊界和第一行之間的距離與該容器的側軸結束內容邊界與第最後一行之間的距離相等。（如果剩下的空間是負數，則各行會向兩個方向溢出的相等距離。） |
測試 » |
| flex-start |
元素位於容器的開頭。 各行向彈性盒容器的起始位置堆疊。彈性盒容器中第一行的側軸起始邊界緊靠住該彈性盒容器的側軸起始邊界，之後的每一行都緊靠住前面一行。 |
測試 » |
| flex-end |
元素位於容器的結尾。 各行向彈性盒容器的結束位置堆疊。彈性盒容器中最後一行的側軸起結束界緊靠住該彈性盒容器的側軸結束邊界，之後的每一行都緊靠住前面一行。 |
測試 » |
| space-between |
元素位於各行之間留有空白的容器內。 各行在彈性盒容器中平均分佈。如果剩餘的空間是負數或彈性盒容器中只有一行，該值等效於'flex-start'。在其它情況下，第一行的側軸起始邊界緊靠住彈性盒容器的側軸起始內容邊界，最後一行的側軸結束邊界緊靠住彈性盒容器的側軸結束內容邊界，剩餘的行則按一定方式在彈性盒窗口中排列，以保持兩兩之間的空間相等。 |
測試 » |
| space-around |
元素位於各行之前、之間、之後都留有空白的容器內。 各行在彈性盒容器中平均分佈，兩端保留子元素與子元素之間間距大小的一半。如果剩餘的空間是負數或彈性盒容器中只有一行，該值等效於'center'。在其它情況下，各行會按一定方式在彈性盒容器中排列，以保持兩兩之間的空間相等，同時第一行前面及最後一行後面的空間是其他空間的一半。 |
測試 » |
| initial | 設置該屬性爲它的默認值。請參閱 initial。 | 測試 » |
| inherit | 從父元素繼承該屬性。請參閱 inherit。 |
7. flex-flow 是 flex-direction、flex-wrap的簡寫形式
https://www.runoob.com/cssref/css3-pr-flex-flow.html
屬性值
| 值 | 描述 |
|---|---|
| flex-direction | 可能的值： row row-reverse column column-reverse initial inherit 默認值是 "row"。 規定靈活項目的方向。 |
| flex-wrap | 可能的值： nowrap wrap wrap-reverse initial inherit 默認值是 "nowrap"。 規定靈活項目是否拆行或拆列。 |
| initial | 設置該屬性爲它的默認值。請參閱 initial。 |
| inherit | 從父元素繼承該屬性。請參閱 inherit。 |
8. order 控制子項目的排列順序，正序方式排列，從小到大
https://www.runoob.com/cssref/css3-pr-order.html
屬性值
| 值 | 描述 |
|---|---|
| number | 默認值是 0。規定靈活項目的順序。 |
| initial | 設置該屬性爲它的默認值。請參閱 initial。 |
| inherit | 從父元素繼承該屬性。請參閱 inherit。 |
示例
<html>
<head>
<style>
*{
margin: 0;
padding: 0;
}
section {
width: 80%;
height: 200px;
border: 1px solid pink;
margin: 100px auto;
display: flex; /*伸縮佈局模式*/
min-width: 500px; /*限制寬度不被擠壓太多*/
max-width: 500px; /*限制寬度*/
/* 水平對齊的4種方式*/
/* justify-content: flex-start; 讓子元素在父容器開頭排序，順序不變 */
/* justify-content: flex-end; 讓子元素在父容器結尾排序，順序不變 */
/* justify-content: space-between; 左右貼邊，中間空白區域平均分配 */
/* justify-content: space-around; 相當於給每個盒子添加左右margin外邊距 */
/* 垂直對齊的4種方式*/
/* align-items: flex-start; 上對齊 */
/* align-items: flex-end; 底對齊 */
/* align-items: center; 垂直居中 */
/* align-items: stretch; 子元素的高度拉伸至父容器高度（子元素不給高度的前提下） */
/* flex-wrap 換行*/
/* flex-wrap: nowarp; 默認不換行，超出就把寬度等比壓縮 */
/* flex-wrap: warp; 換行 */
/* flex-wrap: warp-reverse; 換行，多的部分到上一行 */
/* align-content 多行垂直對齊 必須指定 dispaly: flex; 和 flex-flow: XXX; 才能使用 */
/* align-content: stretch; 默認 */
/* align-content: center; 位於容器中心 */
/* align-content: flex-start; 容器開頭 */
/* align-content: flex-end; 容器結尾 */
/* align-content: space-between; 各行之間有間隙 */
/* align-content: space-around; 各行之前、之間、之後 都有間隙 */
/* flex-flow: 是 flex-direction、flex-wrap的簡寫形式 */
/* flex-flow: row nowrap; */
}
div {
margin: 0 5px;
height: 100%;
flex: 1; /*每個盒子佔1等份*/
}
section div:nth-child(1) {
background-color: red;
}
section div:nth-child(2) {
background-color: yellow;
flex: 2; /*可以自由設置佔據份數*/
/* order 控制子元素的排列順序，正序爲從小到大，默認0*/
/* order: 1; */
}
section div:nth-child(3) {
background-color: blue;
flex: 3; /*可以自由設置佔據份數*/
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
<div></div>
</section>
</body>
</html>