内容课件教案

目uflex布局体目Contentsuflex布局原Contentsuflex布局父项常见属性uflex布局子项常见属性u携程网首页案例制作目

能够掌握flex盒子布局原理u能够理解flex布局常用属性u独立完成携程移动端首页案例2.1Flex视u为什么要学习视uFlex结结2.2FlexnFlexnPcpcflex视结视结目uflex布局体目Contentsuflex布局原Contentsuflex布局父项常见属性uflex布局子项常见属性u携程网首页案例制作3.1FlexuFlexu视u当开启flex布局后会有哪 uFlex布局都有哪些叫法3.3FlexnFlex布局原理就是：给父盒子添加flex属性，来控制子盒子的位置排n当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-alignnFlex布局又叫伸缩布局、弹性布局、伸缩盒布局、弹性盒布局、flex视结视结目uflex布局体目Contentsuflex布局原Contentsuflex布局父项常见属性uflex布局子项常见属性u携程网首页案例制作视uFlex布局会有主轴和侧轴的划分，那么什么是主轴什视结u结练练nFlex布局中默认的主轴是row，xn如果想改变主轴方向可通过设置flex-directionnflex-direction:row将主轴改为x- 视结视结练练uu给父盒子开启flexuu给父盒子开启flex视结练u动动手，练一下这个flex1Flex视视结结练练5.2Flexn通过justify-contentn值为flex-startn值为flex-endn值为flex-centern值为spacearoundn值为spacebetween视总视总练练视结练uu给父盒子开启flex布局利用justity-视结练uu给父盒子开启flex布局利用justity-contentu动动手，练一下这个justify-content视总n开启flexn如果想要换行效果设置flex-wrapwrap视总视总视视结结练练n利用alignitems（单行）nalignitems的值为flex-start表示从头开始nalignitems的值为flex-end表示从结尾开始nalignitems的值为center表示居中显示nalignitems的值为stretch视结视结练练视结练u视结练uu然后给父盒子开启flexu再通过给父盒子设置alignitemu动动手，练一下这个alignitems8.1Flex视uAligin-items视结结nAlign-content适应于换行（多行）的情况下（单行情况下无效），可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属nAlign-item和aligncontent的区别单行找alignitems多行找align-content视总视总视uFlexflow就是flex-direction和flex-wrap视目uflex布局体目Contentsuflex布局原Contentsuflex布局父项常见属性uflex布局子项常见属性u携程网首页案例制作视视结u现在我们利用flex也可以实现这种效果，并且会更容结练练nFlexn剩余空间是指父盒子的宽度减去没有设置flexn比列计算：当前子盒子的flex数值所有flex视结视结练练视结练视结练u给父盒子开启flexuu中间的盒子设置u动动手，练一下这个flex视 视目uflex布局体目Contentsuflex布局原Contentsuflex布局父项常见属性uflex布局子项常见属性u携程网首页案例制作视结练11.2n项目技术选型采用flexnnn视结视结练练视结练u视结练uuu视视结结nn定位后因widthn视结视结视视结结练练n首先右边结构的样式widthn因为左侧伸缩,所以设置父元素display：flex左侧子元素设置n最后在将右侧的user视结视结练练视结练u视结练uu左侧伸缩布局，所以要将父盒子开启flexu再给左侧盒子设置14.1视u搜索模块制search视视u视.1视uLocal视练练视练uu视练uuu动动手，将local17.1Java视ulocalnav视18 uu视视结n利用flex布局实现一行3n利用nthchild（-n+2）视结视结视u利用flex布局如何实现nav视结结练练nn因为默认主轴是横轴，所以使用flex视结视结练练 u动动手，将nav内容结构布局写一下视 练

u将第二个和第三个子盒子