CSS Flexbox 布局是一种现代的网页布局方式，可以方便地实现许多常见的页面布局需求。其中一种常见的需求是在图片与文字并存的情况下，使图片自适应宽度，不论容器大小如何变化，图片的宽度始终与容器相等。在本文中，我们将介绍如何使用 Flexbox 布局实现这种效果。
1. Flexbox 布局简介
Flexbox 是 CSS 应对网页布局需求的一种布局方式。它适用于那些需要适应容器宽度的复杂布局，包括响应式设计。Flexbox 意味着使用弹性布局来进行网页布局。Flexbox 使用 flex 容器来定义项目。
如下是 Flexbox 布局的一些基本概念：
- Flex Container：包含所有 flex items 的容器。
- Flex Item：flex container 中的子元素。
- Main Axis：flex container 中主要的方向。
- Main Start/End：flex container 中主轴的开始和结束位置。
- Cross Axis：flex container 中次要的方向。
- Cross Start/End：flex container 中次轴的开始和结束位置。
2. 实现自适应宽度图片的方法
在这里我们将介绍如何使用 Flexbox 布局来实现自适应宽度的图片。
2.1 HTML 结构
首先，我们需要使用 HTML 结构来创建一个包含图片和文本的布局。以下是示例 HTML 结构：
<div class="flex-container">
<div class="flex-item">
<img src="image.jpg" alt="图片">
</div>
<div class="flex-item">
<p>这是一段文字</p>
</div>
</div>2.2 CSS 样式
现在我们来为这个 Flexbox 布局添加样式。首先，将父元素 .flex-container 设置为 display: flex;，这将启用 Flexbox 布局。然后，将子元素 .flex-item 设置为 flex: 1;，这将使所有元素在主轴方向（默认是水平方向）上均匀分布。
为了让图片自适应容器宽度，需要将图片元素设置为 max-width: 100%;。这将使图片的最大宽度不会超过容器的宽度，保持了图片的宽高比。
以下是完整的 CSS 样式：
-- -------------------- ---- ------- --------------- - -------- ----- - ---------- - ----- -- - --- - ---------- ----- -
2.3 示例代码
你可以复制以下 HTML 和 CSS 代码到一个 HTML 文件中，来查看完整的实现效果：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------- -------------
-------
--------------- -
-------- -----
-
---------- -
----- --
-
--- -
---------- -----
-
--------
-------
------
---- -----------------------
---- ------------------
---- --------------- ---------
------
---- ------------------
-------------
------
------
-------
-------3. 结论
这种方法可以使得图片随着容器大小的变化而适应宽度，从而提高页面的响应式体验。同时，使用 Flexbox 布局可以更好地控制布局方式，让你更好地展示内容。希望这篇文章能够帮助你理解 Flexbox 布局并应用到实践中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67529a368bd460d3ad965ea4