[TOC] #### 1. flex 布局介紹 --- flex 是 Flexible Box 的縮寫, 意為彈性布局。用來為盒狀模型提供最大的靈活性，任何一個容器都可以指定為 Flex 布局 flex 布局原理: 通過給父元素添加 flex 屬性，來控制子盒子的位置和排列方式 #### 2. flex-direction - 設置主軸的方向 --- 在 flex 布局中，分為主軸和側軸兩個方向，也稱為 x 軸 和 y 軸 默認主軸方向就是 x 軸方向，水平向右；默認側軸方向就是 y 軸方向，垂直向下 flex-direction 屬性就是用于決定主軸的方向的，即項目的排列方向（子元素是跟著主軸方向來排列的） | 屬性值 | 描述 | | ------------ | ------------ | | row | 從左到右 (默認值) | | row-reverse | 從右到左 | | column | 從上到下 | | column-reverse | 從下到上 | #### 3. justify-content - 設置主軸上的子元素排列方式 --- justify-content 屬性用于定義項目在主軸上的對齊方式，使用之前一定要確定好主軸是哪個 | 屬性值 | 描述 | | ------------ | ------------ | | flex-start | 從頭部開始排列 (默認值) | | flex-end | 從尾部開始排列 | | center | 在主軸居住對齊 | | space-around | 平分剩余空間 | | space-between | 先兩邊貼邊，再平分剩余空間 (重要) | #### 4. flex-wrap - 設置子元素是否換行 --- 在 flex 布局中，子元素默認是不換行的，如果裝不下，會自動縮小子元素的寬度 | 屬性值 | 描述 | | ------------ | ------------ | | nowrap | 不換行 (默認值) | | wrap | 換行 | #### 5. align-items - 設置側軸上的子元素排列方式 (單行) --- | 屬性值 | 描述 | | ------------ | ------------ | | flex-start | 從上到下 (默認值) | | flex-end | 從下到上 | | center | 垂直居中 | | stretch | 拉伸 (子元素不能設置高度) | #### 6. align-content - 設置側軸上的子元素排列方式 (多行) --- 多行指的是有換行的情況下，在單行下是沒有效果的 | 屬性值 | 描述 | | ------------ | ------------ | | stretch | 子項高度平分父元素高度 (默認值) | | flex-start | 在側軸的頭部開始排列 | | flex-end | 在側軸的尾部開始排列 | | space-around | 子項在測軸平分剩余空間 | | space-between | 子項在測軸先分布在兩頭，再平分剩余空間 | **align-items 和 align-content 區別 ?** align-items 適用于單行情況下，只有上對齊、下對齊、居中和拉伸 align-content 適用于有換行的情況下，不僅有上對齊、下對齊、居中、拉伸，還有平均分配剩余空間的屬性值 總結: 子項單行用 align-items，多行(換行) 用 align-content #### 7. flex-flow - 復合屬性 (flex-direction 和 flex-wrap) --- flex-flow 是 flex-direction 和 flex-wrap 的復合屬性，下面兩種書寫方式等價 ```css flex-flow: row wrap; ``` ```css flex-direction: row; flex-wrap: wrap; ``` #### 8. 基礎代碼 - 練習 flex 布局 --- ```html <style> div { width: 80%; height: 300px; background-color: #abcdef; } div span { width: 150px; height: 100px; background-color: orange; margin-right: 5px; } </style> <div> <span>1</span> <span>2</span> <span>3</span> </div> ```