问题描述

在前端开发中，我们经常遇到这样的问题：当我们将图片放在一个容器中时，图片底部总是莫名其妙地出现一些间距，即使我们设置了 margin: 0 和 padding: 0，这个间距依然存在。

<div class="container">
  <img src="example.jpg" alt="示例图片">
</div>

什么是 Flexbox

Flexbox（弹性盒子布局）是 CSS3 中的一种布局方式，它提供了一种更有效的方式来排列、分布和对齐容器中的项目，即使它们的大小未知或是动态变化的。

基本概念

Flex 容器和 Flex 项目

• Flex 容器（Flex Container）：设置了 display: flex 或 display: inline-flex 的元素
• Flex 项目（Flex Items）：Flex 容器的直接子元素