內(nèi)容課件教案

目uflex布局體目Contentsuflex布局原Contentsuflex布局父項(xiàng)常見(jiàn)屬性u(píng)flex布局子項(xiàng)常見(jiàn)屬性u(píng)攜程網(wǎng)首頁(yè)案例制作目

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

u將第二個(gè)和第三個(gè)子盒子