原创力文档- 1、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。。
- 2、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 3、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
- 4、该文档为VIP文档，如果想要下载，成为VIP会员后，下载免费。
- 5、成为VIP后，下载本文档将扣除1次下载权益。下载后，不支持退款、换文档。如有疑问请联系我们。
- 6、成为VIP后，您将拥有八大权益，权益包括：VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 7、VIP文档为合作方或网友上传，每下载1次， 网站将根据用户上传文档的质量评分、类型等，对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
《物联网Web前端开发基础》课程 Flex布局探究
【任务8-1】弹性盒布局下面将带领读者认识弹性盒。需求分析弹性盒（Flexible Box）是CSS3的一种新的布局模式，它用来在页面需要适应不同的屏幕大小以及设备类型时，确保元素拥有恰当的行为。
【任务8-1】弹性盒布局知识储备——弹性盒的结构引入弹性盒布局模型的目的是，提供一种更加有效的方式，来对一个容器中的子元素进行排列、对齐和分配空白空间。
【任务8-1】弹性盒布局知识储备——弹性盒的结构弹性盒由容器、子元素和轴（包括横轴、纵轴）构成。默认情况下，子元素的排布方向与横轴的方向是一致的。
【任务8-1】弹性盒布局知识储备——弹性盒的结构弹性盒模型几乎在主流浏览器中都得到了支持。iOS SafariAndroid BrowserIEOperaChromeFirefox7.0+4.4+11+12.1+21+22+
【任务8-1】弹性盒布局知识储备——弹性盒display属性我们要使用弹性盒，首先需要使用display属性，来指定外部父元素容器的类型为弹性盒容器。
【任务8-1】弹性盒布局知识储备——弹性盒display属性display属性用于指定元素容器的类型。其默认值为inline，这意味着此元素会被显示为一个内联元素，在元素前后没有换行符；如果设置display的值为flex，则表示用于指定弹性盒的容器；如果设置display的值为none，则表示隐藏该元素。
【任务8-1】弹性盒布局知识储备——弹性盒display属性当父元素div.box的display设为flex后，子元素就会按照内容的实际宽度来显示，且子元素的高度会占满父元素的可用高度。
【任务8-1】弹性盒布局知识储备——弹性盒flex-flow属性flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，用于排列弹性子元素。
【任务8-1】弹性盒布局知识储备——弹性盒flex-flow属性flex-direction用于调整主轴的方向，可以调整为横向或者纵向。默认情况下为横向，此时横轴为主轴，纵轴为侧轴；如果改为纵向，则纵轴为主轴，横轴为侧轴。
【任务8-1】弹性盒布局知识储备——弹性盒flex-flow属性flex-direction属性的取值：取值描述row弹性盒子元素按横轴方向顺序排列（默认值）row-reverse弹性盒子元素按横轴方向逆序排列column弹性盒子元素按纵轴方向顺序排列column-reverse弹性盒子元素按纵轴方向逆序排列
【任务8-1】弹性盒布局知识储备——弹性盒flex-flow属性flex-wrap属性的取值：取值描述nowrap弹性盒容器为单行，该情况下flex子项可能会溢出容器（默认值）wrap弹性盒容器为多行，flex子项溢出的部分会被放置到新行，第一行在上方wrap-reverse反转 wrap 排列（换行），第一行显示在下方
【任务8-1】弹性盒布局知识储备——弹性盒flex-flow属性flex-wrap属性设为column后，子元素为纵向排列显示。
【任务8-1】弹性盒布局知识储备——弹性盒justify-content属性justify-content属性能够设置子元素在主轴方向的排列方式。
【任务8-1】弹性盒布局知识储备——弹性盒justify-content属性justify-content属性的取值：取值描述nowrap弹性盒容器为单行，该情况下flex子项可能会溢出容器（默认值）wrap弹性盒容器为多行，flex子项溢出的部分会被放置到新行，第一行在上方wrap-reverse反转 wrap 排列（换行），第一行显示在下方
【任务8-1】弹性盒布局知识储备——弹性盒justify-content属性justify-content的值为space-between时，项目两端对齐，项目之间的间隔都相等。
【任务8-1】弹性盒布局知识储备——弹性盒justify-content属性justify-content的值为space-around时，每个项目两侧的间隔相等。项目之间的间隔比项目与容器两边边框的间隔大一倍。
【任务8-1】弹性盒布局知识储备——弹性盒align-items属性align-items属性用于设置子元素在交叉轴（十字轴）上的对齐排列方式。
【任务8-1】弹性盒布局知识储备——弹性盒align-items属性align-items属性的取值：取值描述flex-start弹性盒子元素向交叉轴的起始位置对齐flex-end弹性盒子元素向交叉轴的结束位置对齐center弹性盒子元素向交叉轴的中间位置对齐baseline如果弹性盒子元素的行内轴与侧轴为同一条，则该值与flex-
文档评论（0）