一、介绍 弹性布局旨在为容器中的项目提供更有效的布局、对齐和空间分配。 基本概念:
- 容器 container
- 项目 item
- 主轴 main axis
- 交叉轴 cross axis
编辑切换为居中
添加图片注释,不超过 140 字(可选)
二、属性 Container - display - flex-direction - flex-wrap - flex-flow 简写 - justify-content - align-items - align-content - gap, row-gap, column-gap Items - order - flex-grow - flex-shrink - flex-basis - flex 简写 - align-self 图示
编辑切换为居中
添加图片注释,不超过 140 字(可选)
三、动态交互演示 www.joshwcomeau.com/css/interac… 四、项目代码示例
编辑切换为居中
添加图片注释,不超过 140 字(可选)
编辑切换为居中
添加图片注释,不超过 140 字(可选)
参考资料
- An Interactive Guide to Flexbox - Josh Comeau
- Flex 布局教程:语法篇 - 阮一峰的网络日志
- A Complete Guide to Flexbox | CSS-Tricks
- justify-content - CSS: Cascading Style Sheets | MDN
- 写给自己看的display: flex布局教程 | 张鑫旭
解说视频: