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

u能夠掌握flex盒子布局原理u能夠理解flex布局常用屬性21Flex要點提視u為什么要學習視uFlex結結2.2FlexnFlexnPcpcflex視結視結目uflex布局體目Contentsuflex布局原Contentsuflex布局父項常見屬性uflex布局子項常見屬性u攜程網首頁案例制作3.1Flex要點提uFlex視u當開啟flex布局后會有哪 uFlex布局都有哪些叫法3.3FlexnFlex布局原理就是：給父盒子添加flex列方式從而實現flexn當我們?yōu)楦负凶釉O為flex布局以后，子元素的float、clear和vertical-alignnFlex布局又叫伸縮布局、彈性布局、伸縮盒布局、彈性盒布局、flex視結視結目uflex布局體目Contentsuflex布局原Contentsuflex布局父項常見屬性uflex布局子項常見屬性u攜程網首頁案例制作flexflex設置主軸方要點提視視結結練練nFlex布局中默認的主軸是row，xn如果想改變主軸方向可通過設置flex-directionnflex-direction:row將主軸改為x -視結視結練練u定義一個父盒子和幾個子盒子uu定義一個父盒子和幾個子盒子u給父盒子開啟flex布局視結練u動動手，練一下這個flex1Flex要點提視視結結練練5.2Flexn通過justify-contentn值為flex-startn值為flex-endn值為flex-centern值為spacearoundn值為spacebetween視總視總練練視結練uu給父盒子開啟flex布局利用justity-視結練uu給父盒子開啟flex布局利用justity-contentu動動手，練一下這個justify-contentflex-wrapflex-wrap子元素是否換要點提視總n開啟flexn如果想要換行效果設置flex-wrapwrap視總視總align-itemsalign-items設置側軸子元素排要點提視視結結練練n利用align-items能夠設置側軸元素對齊的方式在子項為單項（單行nalignitems的值為flex-start表示從頭開始nalignitems的值為flex-end表示從結尾開始nalignitems的值為center表示居中顯示nalignitems的值為stretch視結視結練練視結練u同樣還是先準備好幾本結構視結練u同樣還是先準備好幾本結構u然后給父盒子開啟flexu再通過給父盒子設置alignitemu動動手，練一下這個align-items81Flexalign-contentalign-content設置側軸子元素排要點提視uAligin-items視結結nAlign-content適應于換行（多行）的情況下（單行情況下無效），可以設置上對齊、下對齊、居中、拉伸以及平均分配剩余空間等屬nAlign-item和aligncontent的區(qū)別單行找alignitems多行找align-content視總視總要點提視uFlexflow就是flex-direction和flex-wrap視目uflex布局體目Contentsuflex布局原Contentsuflex布局父項常見屬性uflex布局子項常見屬性u攜程網首頁案例制作09-子項flex09-子項flex屬性使要點提視視結結練練nFlexn剩余空間是指父盒子的寬度減去沒有設置flexn比列計算：當前子盒子的flex數值所有flex視結視結練練視結練視結練u給父盒子開啟flexuu中間的盒子設置u動動手，練一下這個flex要點提視 視目uflex布局體目Contentsuflex布局原Contentsuflex布局父項常見屬性uflex布局子項常見屬性u攜程網首頁案例制作11-11-攜程移動端首頁準備工要點提視結視結練練11.2n項目技術選型采用flexnnn視結視結練練視結練u初始化基本文件夾視結練u初始化基本文件夾u引入基本文件u首首頁布局分析以及搜索模塊布要點提視視結結nn定位后因width視結視結搜搜索模塊user制要點提視視結結練練n首先右邊結構的樣式widthn因為左側伸縮,所以設置父元素display：flex左側子元素設置n最后在將右側的user視結視結練練視結練視結練u左側伸縮布局，所以要將父盒子開啟flexu再給左側盒子設置14.1首首頁布局分析以及搜索模塊布要點提視u搜索模塊制search視焦焦點圖focus模塊制要點提視u視.1local-navlocal-nav布要點提視uLocal視練練視練uu視練uuu動動手，將local17.1Javalocal-nav內容local-nav內容制視要點提ulocalnav 利用屬性選擇器更換背要點提u屬性選擇器^視.1Javanavnav外觀布要點提視結n利用flex布局實現一行3n利用nthchild（-n+2）視結視結navnav內容制要點提視u利用flex布局如何實現nav視結結練練nn因為默認主軸是橫軸，所以使用flex改變主軸方向即可視結視結練練 u動動手，將nav內容結構布局寫一下視 練

u將第二個和第三個子盒子里面加入兩個u再利用nthchild(-n+2nav-items設置右側邊