響應式開發技術主講人：flex布局定義及原理學習情境四教學內容與過程環節1任務引入與分析探究

有沒有更簡單的做法呢？教學內容與過程環節2知識講解與演示操作任務1：知識點撥1．flex布局定義21Flex布局又稱為彈性布局，是一種用于設計Web頁面布局的CSS技術，是一種新的布局模式。其主要是用于移動端布局，它允許容器中的子元素在容器內以靈活的方式排列，適應不同的屏幕尺寸和設備。教學內容與過程環節2知識講解與演示操作任務1：知識點撥2．布局原理21

采用Flex布局的元素，稱為Flex容器（flexcontainer），簡稱"容器"。它的所有子元素自動成為容器成員，稱為Flex項目（flexitem），簡稱"項目"。教學內容與過程環節2知識講解與演示操作任務1：知識點撥2．布局原理Flex布局divspanspanspandiv就是

flex父容器。span就是子容器flex項目教學內容與過程為什么添加display：flex屬性就可以控制子容器呢？教學內容與過程環節3知識講解與演示操作任務1：知識點撥2．布局原理spanFlex布局divspanspandiv就是

flex父容器。span就是子容器flex項目總結flex布局原理：就是通過給父容器添加flex屬性，來控制子容器的位置和排列方式教學內容與過程環節3知識講解與演示操作任務2：效果分析【彈性布局的簡單應用】教學內容與過程display：flex教學內容與過程環節3知識講解與演示操作任務3：代碼實現【步驟演示】1.搭建結構教學內容與過程環節3知識講解與演示操作任務3：代碼實現【步驟演示】1.搭建結構2.父容器、子容器設置樣式教學內容與過程環節3知識講解與演示操作任務3：代碼實現【步驟演示】1.搭建結構2.父容器、子容器設置樣式3.父盒子設置彈性布局教學內容與過程任務4：操作演示[操作演示]完成flex布局的初次體驗教學內容與過程環節4學生實踐操作任務1：新建站點與網頁任務2：添加元素結構任務3：設置標記屬性任務4：網頁預覽、調試任務5：保存、提交作業教學內容與過程環節5總結、評價本節小結教學評價Flex布局的定義和原理學習通課中完成教學內容與過程環節6布置作業、預習任務作業預習完成彈性布局初體驗的樣式美化flex布局父項常見屬性flex布局子項常見屬性學習情境五教學內容與過程環節1任務引入與分析探究回顧知識：flex布局原理：通過給父容器添加flex屬性，來控制子容器的位置和排列方式教學內容與過程環節2知識講解與演示操作任務1：知識點撥1.

主軸側軸在

flex布局中，是分為主軸和側軸兩個方向，同樣的叫法有

：

行和列、x軸和y軸默認主軸方向就是

x

軸方向，水平向右默認側軸方向就是

y

軸方向，水平向下flex-direction設置誰為主軸，剩下的就是側軸。而我們的子元素是跟著主軸來排列的教學內容與過程環節3知識講解與演示操作任務1：知識點撥2.flex-direction屬性值flex-direction屬性決定主軸的方向（即項目的排列方向）屬性值說明row默認值從左到右row-reverse從右到左column從上到下column-reverse從下到上教學內容與過程環節3知識講解與演示操作任務1：知識點撥主軸為Y軸時屬性值為column

屬性值為column-reverse教學內容與過程環節3知識講解與演示操作任務2：效果分析【flex-direction屬性的簡單運用】教學內容與過程環節3知識講解與演示操作任務2：效果分析display：flexflex-direction教學內容與過程環節3知識講解與演示操作任務3：代碼實現【步驟演示】1.搭建結構教學內容與過程環節3知識講解與演示操作任務3：代碼實現【步驟演示】1.搭建結構2.父容器、子容器設置樣式教學內容與過程環節3知識講解與演示操作任務3：代碼實現【步驟演示】1.搭建結構2.父容器、子容器設置樣式3.父容器設置主軸方向教學內容與過程環節4學生實踐操作任務1：新建站點與網頁任務2：添加元素結構任務3：設置標記屬性任務4：網頁預覽、調試任務5：保存、提交作業教學內容與過程環節5總結、評價本節小結教學評價Flex-direction學習通課中完成教學內容與過程環節6布置作業、預習任務作業預習完成flex-direction案例的樣式美化flex-wrap屬性flex布局父項常見屬性學習情境六教學內容與過程環節1任務引入與分析探究這樣的布局效果如何用代碼實現呢？教學內容與過程環節2知識講解與演示操作任務1：知識點撥231justify-content

此屬性定義了項目在主軸上的對齊方式，可設置主軸上的子元素排列方式。注意：使用這個屬性之前一定要先確定好主軸。教學內容與過程環節3知識講解與演示操作任務1：知識點撥2．用法屬性值說明flex-start默認值從頭部開始

如果主軸是x軸，則從左到右flex-end從尾部開始排列center在主軸居中對齊（如果主軸是x軸則水平居中）space-around平分剩余空間space-between先兩邊貼邊再平分剩余空間（重要）教學內容與過程環節3知識講解與演示操作任務3：代碼實現【步驟演示】1.搭建結構教學內容與過程環節3知識講解與演示操作任務3：代碼實現【步驟演示】1.搭建結構2.給父容器、子容器設置樣式教學內容與過程環節3知識講解與演示操作任務3：代碼實現【步驟演示】1.搭建結構2.給父容器、子容器設置樣式3.給父容器添加justify-content屬性教學內容與過程環節3知識講解與演示操作任務4：操作展示[操作演示]完成簡易小米家電模塊的布局教學內容與過程環節4學生實踐操作任務1：新建站點與網頁任務2：添加元素結構任務3：設置標記屬性任務4：網頁預覽、調試任務5：保存、提交作業教學內容與過程環節5總結、評價本節小結教學評價Flex屬性的含義及用法學習通課中完成教學內容與過程環節6布置作業、預習任務作業預習完成京東移動端的搜索框制作align-self屬性flex布局子項常見屬性學習情境七教學內容與過程環節1任務引入與分析探究知識回顧：通過justify-content屬性，可設置主軸上的子元素排列方式如果要設置側軸上的子元素排列方式，又該怎么做呢？教學內容與過程環節2知識講解與演示操作任務1：知識點撥1.

定義align-items屬性是控制子項在側軸（默認是y軸）上的排列方式在子項為單項（單行）的時候使用。教學內容與過程環節3知識講解與演示操作任務1：知識點撥2．用法屬性值說明flex-start從上到下flex-end

從下到上center

擠在一起居中（垂直居中）stretch

拉伸

（默認值

）教學內容與過程環節3知識講解與演示操作任務2：效果分析【align-items的簡單運用】教學內容與過程環節3知識講解與演示操作任務3：代碼實現【步驟演示】1.搭建結構教學內容與過程環節3知識講解與演示操作任務3：代碼實現【步驟演示】1.搭建結構2.設置基礎樣式教學內容與過程環節3知識講解與演示操作任務3：代碼實現【步驟演示】1.搭建結構2.設置基礎樣式3.給父容器設置align-items屬性教學內容與過程環節3知識講解與演示操作任務4：操作展示[操作演示]完成align-items的簡單運用教學內容與過程環節4學生實踐操作任務1：新建站點與網頁任務2：添加元素結構任務3：設置標記屬性任務4：網頁預覽、調試任務5：保存、提交作業教學內容與過程環節5總結、評價本節小結教學評價align-items屬性的含義及用法學習通課中完成教學內容與過程環節6布置作業、預習任務作業預習完成align-items的運用的樣式flex-flow屬性flex布局子項常見屬性學習情境八教學內容與過程環節1任務引入與分析探究1.這種變化效果是如何實現的？教學內容與過程環節2知識講解與演示操作任務1：知識點撥1.flex屬性flex屬性定義子項目分配剩余空間，用flex來表示占多少份數。實際的分配額度=各自的份數/同級子項的總份數教學內容與過程環節3知識講解與演示操作任務1：知識點撥2．格式item{flex:<number>;}教學內容與過程環節3知識講解與演示操作任務2：效果分析【搜索框的簡易效果】教學內容與過程Flex值教學內容與過程環節3知識講解與演示操作任務3：代碼實現【步驟演示】1.搭建結構2.給兩側子項目設置樣式3.給中間子項目添加flex屬性教學內容與過程環節3