《響應(yīng)式開發(fā)技術(shù)》課件-2.1 flex布局基礎(chǔ)-flex布局定義及原理VIP

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

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

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

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