了解不一样的CSS Flex 布局

193 阅读1分钟

一、介绍 弹性布局旨在为容器中的项目提供更有效的布局、对齐和空间分配。 基本概念:

  1. 容器 container
  2. 项目 item
  3. 主轴 main axis
  4. 交叉轴 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 字(可选)

参考资料

  1. An Interactive Guide to Flexbox - Josh Comeau
  2. Flex 布局教程:语法篇 - 阮一峰的网络日志
  3. A Complete Guide to Flexbox | CSS-Tricks
  4. justify-content - CSS: Cascading Style Sheets | MDN
  5. 写给自己看的display: flex布局教程 | 张鑫旭

解说视频:

vdn3.vzuu.com/HD/307a2032…