使用flexbox（无浮点）或其他任何东西包裹图像周围的元素

Question

我正在制作一个页面，我希望在img展示广告容器的左侧和section＆amp; h1使用p对文字右侧发送文字。

我在flexbox展示广告容器中有更多文字和元素，但我希望它们低于section。

目标：

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

对于小屏幕，我希望元素按此顺序堆叠在彼此之下：

1. h1
2. img
3. h1
4. p
5. a

等...

Answer 1

  

我正在制作一个页面，我希望在img展示广告容器的左侧和section＆amp; h1使用flexbox对图像右侧发送文本。

     

但由于某种原因，p不是水平的，而是垂直对齐的......其余的元素不会堆叠在彼此之下。

您缺少的是嵌套的Flex容器。

您可以使用h1或display: flex将元素转换为弹性容器。然后，此容器的所有子项都变为flex项并接受flex属性。

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

这使您可以将行和列深入混合到HTML结构中。

我已经对您的codepen进行了一些基本的修改，例如：http://codepen.io/anon/pen/xVamQQ?editors=1100

Answer 2

我改变了结构以适应行和列流的交替模式。看起来你已经掌握了flexbox的基本原理。我关心的是没有任何填充，主要的高度是1000vh。这实际上是10个视口堆叠在一起。

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

CODEPEN