《響應(yīng)式開發(fā)技術(shù)》課件-2.4 flex布局基礎(chǔ)-align-items屬性VIP

響應(yīng)式開發(fā)技術(shù)主講人：flex布局子項(xiàng)常見屬性學(xué)習(xí)情境七教學(xué)內(nèi)容與過程環(huán)節(jié)1任務(wù)引入與分析探究知識(shí)回顧：通過justify-content屬性，可設(shè)置主軸上的子元素排列方式如果要設(shè)置側(cè)軸上的子元素排列方式，又該怎么做呢？教學(xué)內(nèi)容與過程環(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)容與過程環(huán)節(jié)3知識(shí)講解與演示操作任務(wù)1：知識(shí)點(diǎn)撥2．用法屬性值說明flex-start從上到下flex-end

從下到上center

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

拉伸

（默認(rèn)值

）教學(xué)內(nèi)容與過程環(huán)節(jié)3知識(shí)講解與演示操作任務(wù)2：效果分析【align-items的簡(jiǎn)單運(yùn)用】教學(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è)置基礎(chǔ)樣式教學(xué)內(nèi)容與過程環(huán)節(jié)3知識(shí)講解與演示操作任務(wù)3：代碼實(shí)現(xiàn)【步驟演示】1.搭建結(jié)構(gòu)2.設(shè)置基礎(chǔ)樣式3.給父容器設(shè)置align-items屬性教學(xué)內(nèi)容與過程環(huán)節(jié)3知識(shí)講解與演示操作任務(wù)4：操作展示[操作演示]完成align-items的簡(jiǎn)單運(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à)align-items屬性的含義及用法學(xué)習(xí)通課中完成教學(xué)內(nèi)容與過程環(huán)節(jié)6布置作業(yè)