《響應(yīng)式開(kāi)發(fā)技術(shù)》課件-2. flex布局基礎(chǔ)

響應(yīng)式開(kāi)發(fā)技術(shù)主講人：flex布局定義及原理學(xué)習(xí)情境四教學(xué)內(nèi)容與過(guò)程環(huán)節(jié)1任務(wù)引入與分析探究

有沒(méi)有更簡(jiǎn)單的做法呢？教學(xué)內(nèi)容與過(guò)程環(huán)節(jié)2知識(shí)講解與演示操作任務(wù)1：知識(shí)點(diǎn)撥1．flex布局定義21Flex布局又稱為彈性布局，是一種用于設(shè)計(jì)Web頁(yè)面布局的CSS技術(shù)，是一種新的布局模式。其主要是用于移動(dòng)端布局，它允許容器中的子元素在容器內(nèi)以靈活的方式排列，適應(yīng)不同的屏幕尺寸和設(shè)備。教學(xué)內(nèi)容與過(guò)程環(huán)節(jié)2知識(shí)講解與演示操作任務(wù)1：知識(shí)點(diǎn)撥2．布局原理21

采用Flex布局的元素，稱為Flex容器（flexcontainer），簡(jiǎn)稱"容器"。它的所有子元素自動(dòng)成為容器成員，稱為Flex項(xiàng)目（flexitem），簡(jiǎn)稱"項(xiàng)目"。教學(xué)內(nèi)容與過(guò)程環(huán)節(jié)2知識(shí)講解與演示操作任務(wù)1：知識(shí)點(diǎn)撥2．布局原理Flex布局divspanspanspandiv就是

flex父容器。span就是子容器flex項(xiàng)目教學(xué)內(nèi)容與過(guò)程為什么添加display：flex屬性就可以控制子容器呢？教學(xué)內(nèi)容與過(guò)程環(huán)節(jié)3知識(shí)講解與演示操作任務(wù)1：知識(shí)點(diǎn)撥2．布局原理spanFlex布局divspanspandiv就是

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

主軸側(cè)軸在

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

：

行和列、x軸和y軸默認(rèn)主軸方向就是

x

軸方向，水平向右默認(rèn)側(cè)軸方向就是

y

軸方向，水平向下flex-direction設(shè)置誰(shuí)為主軸，剩下的就是側(cè)軸。而我們的子元素是跟著主軸來(lái)排列的教學(xué)內(nèi)容與過(guò)程環(huán)節(jié)3知識(shí)講解與演示操作任務(wù)1：知識(shí)點(diǎn)撥2.flex-direction屬性值flex-direction屬性決定主軸的方向（即項(xiàng)目的排列方向）屬性值說(shuō)明row默認(rèn)值從左到右row-reverse從右到左column從上到下column-reverse從下到上教學(xué)內(nèi)容與過(guò)程環(huán)節(jié)3知識(shí)講解與演示操作任務(wù)1：知識(shí)點(diǎn)撥主軸為Y軸時(shí)屬性值為column

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

此屬性定義了項(xiàng)目在主軸上的對(duì)齊方式，可設(shè)置主軸上的子元素排列方式。注意：使用這個(gè)屬性之前一定要先確定好主軸。教學(xué)內(nèi)容與過(guò)程環(huán)節(jié)3知識(shí)講解與演示操作任務(wù)1：知識(shí)點(diǎn)撥2．用法屬性值說(shuō)明flex-start默認(rèn)值從頭部開(kāi)始

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

定義align-items屬性是控制子項(xiàng)在側(cè)軸（默認(rèn)是y軸）上的排列方式在子項(xiàng)為單項(xiàng)（單行）的時(shí)候使用。教學(xué)內(nèi)容與過(guò)程環(huán)節(jié)3知識(shí)講解與演示操作任務(wù)1：知識(shí)點(diǎn)撥2．用法屬性值說(shuō)明flex-start從上到下flex-end

從下到上center

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

拉伸

（默認(rèn)值

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