使用 flexbox（无浮动）或其他任何东西将元素包裹在图像周围答案

【问题标题】：Wrap elements around an image with flexbox (no float), or anything else使用 flexbox（无浮动）或其他任何东西将元素包裹在图像周围
【发布时间】：2016-08-21 02:07:27
【问题描述】：

我正在处理一个页面，我希望响应式 img 与我的 section flex 容器的左侧对齐，h1 和 p 文本在图像的右侧，使用 @987654328 @。

section flex 容器中有更多文本和元素，但我希望它们位于 img 下方。

目标：

我使用codepen 作为沙盒来完成任务。但由于某种原因，h1 不是水平的，而是垂直对齐的。随着屏幕尺寸的减小，图像没有保持其纵横比。其余元素不会相互堆叠。

对于小屏幕，我希望元素按以下顺序堆叠在一起：

img
h1
p
a
a

等等……

【问题讨论】：

标签： html css responsive-design flexbox

【解决方案1】：

我更改了结构以适应行和列流的交替模式。看起来你已经掌握了 flexbox 的基础知识。我担心的是缺少任何填充，并且给 main 的高度是 1000vh。这实际上是 10 个视口堆叠在一起。

main { background-color: Gainsboro; height: 1000vh; overflow-y: scroll; }

CODEPEN

【讨论】：

.frame 由于margin: 0 auto; 而居中，而max-width: 1000px; 作为frame 位于页面中心。但我无法在你的 codepen 上这样做
您可以使用 body class=col 而不是添加额外的 (div class=col) 元素。语义美=_-
不，先生。那是故意的。除非我从头开始构建布局并提前计划，否则我永远不会让 body 成为 flex 容器。在处理身体时，有一些特殊的考虑因素需要考虑。文档 :root () 和正文应该用作页面其余部分的基础和参考。被动影响不是主动控制。
由于.frame没有固定的宽度，给它分配这个样式：left:50%; transform: translateX (-50%);
顺便说一句，我故意把它做成了一个 div，它突出显示div.col 是布局第一层的弹性容器。请注意，我使用了
和
，尽管我也应该将
下的 div.col 更改为
。

【解决方案2】：

我正在处理一个页面，我希望响应式img 与我的section flex 容器的左侧对齐，并且h1 和p 使用flexbox 在图像的右侧显示文本。

但由于某种原因，h1 不是水平的，而是垂直对齐的......并且其余元素不会相互堆叠。

您缺少的是嵌套的弹性容器。

您可以使用display: flex 或display: inline-flex 将元素转换为弹性容器。然后这个容器的所有子项都成为弹性项目并接受弹性属性。

但您也可以将弹性项目制作成弹性容器。

这使您可以在 HTML 结构的深处混合行和列。

我对你的 codepen 做了一些基本的修改，例如：http://codepen.io/anon/pen/xVamQQ?editors=1100

【讨论】：