[TOC] #### 1. flex 布局介紹 --- flex 是 Flexible Box 的縮寫, 意為彈性布局。用來為盒狀模型提供最大的靈活性,任何一個(gè)容器都可以指定為 Flex 布局 flex 布局原理: 通過給父元素添加 flex 屬性,來控制子盒子的位置和排列方式 #### 2. flex-direction - 設(shè)置主軸的方向 --- 在 flex 布局中,分為主軸和側(cè)軸兩個(gè)方向,也稱為 x 軸 和 y 軸 默認(rèn)主軸方向就是 x 軸方向,水平向右;默認(rèn)側(cè)軸方向就是 y 軸方向,垂直向下 flex-direction 屬性就是用于決定主軸的方向的,即項(xiàng)目的排列方向(子元素是跟著主軸方向來排列的) | 屬性值 | 描述 | | ------------ | ------------ | | row | 從左到右 (默認(rèn)值) | | row-reverse | 從右到左 | | column | 從上到下 | | column-reverse | 從下到上 | #### 3. justify-content - 設(shè)置主軸上的子元素排列方式 --- justify-content 屬性用于定義項(xiàng)目在主軸上的對(duì)齊方式,使用之前一定要確定好主軸是哪個(gè) | 屬性值 | 描述 | | ------------ | ------------ | | flex-start | 從頭部開始排列 (默認(rèn)值) | | flex-end | 從尾部開始排列 | | center | 在主軸居住對(duì)齊 | | space-around | 平分剩余空間 | | space-between | 先兩邊貼邊,再平分剩余空間 (重要) | #### 4. flex-wrap - 設(shè)置子元素是否換行 --- 在 flex 布局中,子元素默認(rèn)是不換行的,如果裝不下,會(huì)自動(dòng)縮小子元素的寬度 | 屬性值 | 描述 | | ------------ | ------------ | | nowrap | 不換行 (默認(rèn)值) | | wrap | 換行 | #### 5. align-items - 設(shè)置側(cè)軸上的子元素排列方式 (單行) --- | 屬性值 | 描述 | | ------------ | ------------ | | flex-start | 從上到下 (默認(rèn)值) | | flex-end | 從下到上 | | center | 垂直居中 | | stretch | 拉伸 (子元素不能設(shè)置高度) | #### 6. align-content - 設(shè)置側(cè)軸上的子元素排列方式 (多行) --- 多行指的是有換行的情況下,在單行下是沒有效果的 | 屬性值 | 描述 | | ------------ | ------------ | | stretch | 子項(xiàng)高度平分父元素高度 (默認(rèn)值) | | flex-start | 在側(cè)軸的頭部開始排列 | | flex-end | 在側(cè)軸的尾部開始排列 | | space-around | 子項(xiàng)在測軸平分剩余空間 | | space-between | 子項(xiàng)在測軸先分布在兩頭,再平分剩余空間 | **align-items 和 align-content 區(qū)別 ?** align-items 適用于單行情況下,只有上對(duì)齊、下對(duì)齊、居中和拉伸 align-content 適用于有換行的情況下,不僅有上對(duì)齊、下對(duì)齊、居中、拉伸,還有平均分配剩余空間的屬性值 總結(jié): 子項(xiàng)單行用 align-items,多行(換行) 用 align-content #### 7. flex-flow - 復(fù)合屬性 (flex-direction 和 flex-wrap) --- flex-flow 是 flex-direction 和 flex-wrap 的復(fù)合屬性,下面兩種書寫方式等價(jià) ```css flex-flow: row wrap; ``` ```css flex-direction: row; flex-wrap: wrap; ``` #### 8. 基礎(chǔ)代碼 - 練習(xí) 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> ``` ![](https://img.itqaq.com/art/content/b100bb7b64d1c3f84c628a00d4281d36.png)