本文介绍了如何使用 CSS 实现一种响应式布局，使得两个元素在容器允许的情况下水平排列，并保持相同的宽度。当容器宽度不足以容纳两个元素时，它们将垂直排列。我们将探讨如何利用 Flexbox 的 flex-wrap 属性来实现这一效果，并提供详细的代码示例和解释。
使用 Flexbox 实现响应式等宽排列
Flexbox 是一种强大的 CSS 布局模块，它允许我们轻松地控制元素的排列方式、对齐方式和尺寸。通过结合 flex-wrap 属性，我们可以实现元素在容器中自动换行的效果，从而实现响应式布局。
核心思路：
- 将容器设置为 Flexbox 容器。
- 设置 flex-wrap: wrap; 属性，允许子元素在容器宽度不足时换行。
- 通过设置子元素的宽度，控制它们的排列方式。
代码示例：
立即学习“前端免费学习笔记（深入）”；
<div class="wrapper"> <img src="https://unsplash.it/200/200" alt="示例图片"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> </div>
.wrapper {
display: flex;
flex-wrap: wrap;
width: 400px; /* 容器宽度，可根据实际情况调整 */
border: 1px solid red; /* 方便观察 */
}
.wrapper img {
width: 200px; /* 图片宽度 */
height: auto;
}
.wrapper p {
width: 200px; /* 段落宽度 */
height: auto;
margin: 0; /* 清除默认margin */
padding: 10px;
}代码解释：
- .wrapper: display: flex 将 div 元素设置为 Flexbox 容器。flex-wrap: wrap 允许子元素在宽度超过容器宽度时换行。width: 400px 定义了容器的宽度。
- .wrapper img: width: 200px 定义了图片的宽度，使其占据容器一半的宽度。height: auto 保持图片宽高比。
- .wrapper p: width: 200px 定义了段落的宽度，使其占据容器一半的宽度。height: auto 使段落高度自适应内容。margin: 0 清除段落默认的 margin，避免影响布局。padding: 10px 增加段落内部的留白，提高可读性。
运行效果：
当容器宽度大于或等于 400px 时，图片和段落将水平排列，各占据一半的宽度。当容器宽度小于 400px 时，段落将自动换行到图片下方，垂直排列。
注意事项：
- 确保容器的宽度足够容纳至少一个子元素，否则可能会导致布局错乱。
- 可以根据实际需求调整子元素的宽度和容器的宽度，以达到最佳的布局效果。
- 可以使用媒体查询 (Media Queries) 来根据不同的屏幕尺寸调整容器和子元素的宽度，从而实现更精细的响应式控制。
示例：使用媒体查询实现更精细的响应式控制
.wrapper {
display: flex;
flex-wrap: wrap;
width: 400px;
border: 1px solid red;
}
.wrapper img {
width: 200px;
height: auto;
}
.wrapper p {
width: 200px;
height: auto;
margin: 0;
padding: 10px;
}
/* 在屏幕宽度小于 600px 时，让图片和段落占据 100% 宽度 */
@media (max-width: 600px) {
.wrapper {
width: 100%; /* 容器宽度占据屏幕 100% */
}
.wrapper img {
width: 100%; /* 图片宽度占据容器 100% */
}
.wrapper p {
width: 100%; /* 段落宽度占据容器 100% */
}
}在这个示例中，我们使用了媒体查询 @media (max-width: 600px) 来定义在屏幕宽度小于 600px 时的样式。当屏幕宽度小于 600px 时，容器和子元素（图片和段落）的宽度都设置为 100%，从而实现垂直排列的效果。
总结：
通过结合 Flexbox 的 flex-wrap 属性和媒体查询，我们可以轻松地实现响应式布局，使得元素在不同的屏幕尺寸下都能以最佳的方式排列。这种方法简单易懂，且具有很强的灵活性，可以满足各种复杂的布局需求。掌握这种技巧对于前端开发人员来说至关重要。
