內(nèi)容課件教案

目uflex布局體目Contentsuflex布局原Contentsuflex布局父項常見屬性uflex布局子項常見屬性u攜程網(wǎng)首頁案例制作目

能夠掌握flex盒子布局原理u能夠理解flex布局常用屬性u獨立完成攜程移動端首頁案例2.1Flex視u為什么要學(xué)習(xí)視uFlex結(jié)結(jié)2.2FlexnFlexnPcpcflex視結(jié)視結(jié)目uflex布局體目Contentsuflex布局原Contentsuflex布局父項常見屬性uflex布局子項常見屬性u攜程網(wǎng)首頁案例制作3.1FlexuFlexu視u當(dāng)開啟flex布局后會有哪 uFlex布局都有哪些叫法3.3FlexnFlex布局原理就是：給父盒子添加flex屬性，來控制子盒子的位置排n當(dāng)我們?yōu)楦负凶釉O(shè)為flex布局以后，子元素的float、clear和vertical-alignnFlex布局又叫伸縮布局、彈性布局、伸縮盒布局、彈性盒布局、flex視結(jié)視結(jié)目uflex布局體目Contentsuflex布局原Contentsuflex布局父項常見屬性uflex布局子項常見屬性u攜程網(wǎng)首頁案例制作視uFlex布局會有主軸和側(cè)軸的劃分，那么什么是主軸什視結(jié)u結(jié)練練nFlex布局中默認(rèn)的主軸是row，xn如果想改變主軸方向可通過設(shè)置flex-directionnflex-direction:row將主軸改為x- 視結(jié)視結(jié)練練uu給父盒子開啟flexuu給父盒子開啟flex視結(jié)練u動動手，練一下這個flex1Flex視視結(jié)結(jié)練練5.2Flexn通過justify-contentn值為flex-startn值為flex-endn值為flex-centern值為spacearoundn值為spacebetween視總視總練練視結(jié)練uu給父盒子開啟flex布局利用justity-視結(jié)練uu給父盒子開啟flex布局利用justity-contentu動動手，練一下這個justify-content視總n開啟flexn如果想要換行效果設(shè)置flex-wrapwrap視總視總視視結(jié)結(jié)練練n利用alignitems（單行）nalignitems的值為flex-start表示從頭開始nalignitems的值為flex-end表示從結(jié)尾開始nalignitems的值為center表示居中顯示nalignitems的值為stretch視結(jié)視結(jié)練練視結(jié)練u視結(jié)練uu然后給父盒子開啟flexu再通過給父盒子設(shè)置alignitemu動動手，練一下這個alignitems8.1Flex視uAligin-items視結(jié)結(jié)nAlign-content適應(yīng)于換行（多行）的情況下（單行情況下無效），可以設(shè)置上對齊、下對齊、居中、拉伸以及平均分配剩余空間等屬nAlign-item和aligncontent的區(qū)別單行找alignitems多行找align-content視總視總視uFlexflow就是flex-direction和flex-wrap視目uflex布局體目Contentsuflex布局原Contentsuflex布局父項常見屬性uflex布局子項常見屬性u攜程網(wǎng)首頁案例制作視視結(jié)u現(xiàn)在我們利用flex也可以實現(xiàn)這種效果，并且會更容結(jié)練練nFlexn剩余空間是指父盒子的寬度減去沒有設(shè)置flexn比列計算：當(dāng)前子盒子的flex數(shù)值所有flex視結(jié)視結(jié)練練視結(jié)練視結(jié)練u給父盒子開啟flexuu中間的盒子設(shè)置u動動手，練一下這個flex視 視目uflex布局體目Contentsuflex布局原Contentsuflex布局父項常見屬性uflex布局子項常見屬性u攜程網(wǎng)首頁案例制作視結(jié)練11.2n項目技術(shù)選型采用flexnnn視結(jié)視結(jié)練練視結(jié)練u視結(jié)練uuu視視結(jié)結(jié)nn定位后因widthn視結(jié)視結(jié)視視結(jié)結(jié)練練n首先右邊結(jié)構(gòu)的樣式widthn因為左側(cè)伸縮,所以設(shè)置父元素display：flex左側(cè)子元素設(shè)置n最后在將右側(cè)的user視結(jié)視結(jié)練練視結(jié)練u視結(jié)練uu左側(cè)伸縮布局，所以要將父盒子開啟flexu再給左側(cè)盒子設(shè)置14.1視u搜索模塊制search視視u視.1視uLocal視練練視練uu視練uuu動動手，將local17.1Java視ulocalnav視18 uu視視結(jié)n利用flex布局實現(xiàn)一行3n利用nthchild（-n+2）視結(jié)視結(jié)視u利用flex布局如何實現(xiàn)nav視結(jié)結(jié)練練nn因為默認(rèn)主軸是橫軸，所以使用flex視結(jié)視結(jié)練練 u動動手，將nav內(nèi)容結(jié)構(gòu)布局寫一下視 練

u將第二個和第三個子盒子