[TOC] # 簡介 主軸：Flex容器的主軸主要用來配置Flex項目，默認是水平方向 側軸：與主軸垂直的軸稱作側軸，默認是垂直方向的 方向：默認主軸從左向右，側軸默認從上到下 主軸和側軸并不是固定不變的，通過flex-direction可以互換。  Flex布局的語法規范經過幾年發生了很大的變化，也給Flexbox的使用帶來一定的局限性，因為語法規范版本眾多，瀏覽器支持不一致，致使Flexbox布局使用不多 **各屬性詳解** 1. flex子項目在主軸的縮放比例，不指定flex屬性，則不參與伸縮分配 * min-width 最小值 min-width: 280px 最小寬度 不能小于 280 * max-width: 1280px 最大寬度 不能大于 1280 2. flex-direction調整主軸方向（默認為水平方向） * flex-direction: column 垂直排列 * flex-direction: row 水平排列 3. justify-content調整主軸對齊（水平對齊） 子盒子如何在父盒子里面水平對齊 | 值 | 描述 | 白話文 | | --- | --- | --- | | flex-start | 默認值。項目位于容器的開頭。 | 讓子元素從父容器的開頭開始排序但是盒子順序不變 | | flex-end | 項目位于容器的結尾。 | 讓子元素從父容器的后面開始排序但是盒子順序不變 | | center | 項目位于容器的中心。 | 讓子元素在父容器中間顯示 | | space-between | 項目位于各行之間留有空白的容器內。 | 左右的盒子貼近父盒子，中間的平均分布空白間距 | | space-around | 項目位于各行之前、之間、之后都留有空白的容器內。 | 相當于給每個盒子添加了左右margin外邊距 | 4. align-items調整側軸對齊（垂直對齊） 子盒子如何在父盒子里面垂直對齊（單行） | 值 | 描述 | 白話文 | | --- | --- | --- | | stretch | 默認值。項目被拉伸以適應容器。 | 讓子元素的高度拉伸適用父容器（子元素不給高度的前提下) | | center | 項目位于容器的中心。 | 垂直居中 | | flex-start | 項目位于容器的開頭。 | 垂直對齊開始位置 上對齊 | | flex-end | 項目位于容器的結尾。 | 垂直對齊結束位置 底對齊 | 5. flex-wrap控制是否換行 當我們子盒子內容寬度多于父盒子的時候如何處理 | 值 | 描述 | | --- | --- | | nowrap | 默認值。規定靈活的項目不拆行或不拆列。 不換行，則 收縮（壓縮） 顯示 強制一行內顯示 | | wrap | 規定靈活的項目在必要的時候拆行或拆列。 | | wrap-reverse | 規定靈活的項目在必要的時候拆行或拆列，但是以相反的順序。 | 6. flex-flow是flex-direction、flex-wrap的簡寫形式 ~~~ flex-flow: flex-direction flex-wrap; ~~~ 白話記： flex-flow: 排列方向 換不換行; 兩個中間用空格 例如： ~~~ display: flex; /* flex-direction: row; flex-wrap: wrap; 這兩句話等價于下面的這句話*/ flex-flow: column wrap; /* 兩者的綜合 */ ~~~ 7. align-content堆棧（由flex-wrap產生的獨立行）多行垂直對齊方式齊 align-content是針對flex容器里面多軸(多行)的情況,align-items是針對一行的情況進行排列。 必須對父元素設置自由盒屬性display:flex;，并且設置排列方式為橫向排列flex-direction:row;并且設置換行，flex-wrap:wrap;這樣這個屬性的設置才會起作用。 | 值 | 描述 | 測試 | | --- | --- | --- | | stretch | 默認值。項目被拉伸以適應容器。 | | | center | 項目位于容器的中心。 | | | flex-start | 項目位于容器的開頭。 | | | flex-end | 項目位于容器的結尾。 | | | space-between | 項目位于各行之間留有空白的容器內。 | | | space-around | 項目位于各行之前、之間、之后都留有空白的容器內。 | | 8. order控制子項目的排列順序，正序方式排序，從小到大 用css 來控制盒子的前后順序。 用order 就可以 用整數值來定義排列順序，數值小的排在前面。可以為負值。 默認值是 0 ~~~ order: 1; ~~~ 此知識點重在理解，要明確找出主軸、側軸、方向，各屬性對應的屬性值 ~~~ <style> section { width: 80%; height: 200px; border: 1px solid pink; margin: 100px auto; /*父盒子添加 flex*/ display: flex; /*伸縮布局模式*/ min-width: 500px; flex-direction: row-reverse; /*給父盒子添加 排列方式 可以是水平 也可以 是 垂直*/ } section div { } section div:nth-child(1) { background-color: pink; width: 200px; } section div:nth-child(2) { background-color: purple; margin: 0 5px; width: 100px; } section div:nth-child(3) { background-color: pink; flex: 1;/*子盒子添加分數*/ } section div:nth-child(4) { background-color: skyblue; flex: 1;/*子盒子添加分數*/ } </style> <section> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </section> ~~~