第11章 flex布局模型

移动端页面广泛使用flex布局。也称弹性布局(flex layout),弹性盒子布局(flexbox layout)。

flex布局的4项核心内容:flex line box、三类对齐、伸缩、相关FC。

flex模型布局完整示意图

img

本章主要内容:基本概念、flex调试、flex模型与规范规则、flex容器设置、flex子元素设置;flex容器设置包括:flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content、gap;flex子元素设置包括:flex-grow、flex-shrink、flex-basis、flex、order。


11.1 列式布局发展历程

11.2 flex布局的基本概念

11.3 flex布局模型与规范规则

11.4 开发者工具调试flex布局

11.5 flex容器设置

11.6 flex子元素设置

11.7 flex容器设置(续)

11.8 flex子元素设置(续)

11.9 本章小节

11.10 课后练习