无法在同一个 flexbox 容器中水平和垂直堆叠项目

Question

我有一个引导 flexbox 容器，我试图让左侧的图像保持水平，但标题、描述和供电部分都垂直堆叠在它的右侧。但是，每当我尝试更改对齐方式时，我能找到的唯一选项是将所有内容框水平或垂直堆叠。我想避免浮动，但是如何将图像水平对齐并垂直对齐三个不同的文本部分？

    <div class="container">
        <div class="d-flex justify-content-end flex-row my-flex-container ">
            <div class="mr-auto p-2 my-flex-item"><img src="./images/webimage.png" alt="Mountain View"></div>                
            <div class="p-2 my-flex-item hello">Quoriron</div>
            <div class="p-2 my-flex-item hello">Quoriron is a Quora clone, made with React/Redux and using Ruby-on-Rails as an APIQuoriron is a Quora clone, made with React/Redux and using Ruby-on-Rails as an APIQuoriron is a Quora clone, made with React/Redux and using Ruby-on-Rails as an API</div>            
            <div class="p-2 my-flex-item hello">Powered by: React, Rails</div>
        </div>
    </div>

Answer 1

您要么需要使用 flex column wrap 流，给容器一个高度，将图像 flex 项的高度设置为 100%，或者为文本项添加一个包装器。

使用 column 方向，您仍然可能会在文本上再次换行，因此对于动态响应解决方案，我建议使用额外的 wrapper。

注意，你需要相应地调整 Bootstrap 类，我没有这样做

注意 2，正如你自己所说，float 当然可以这样做，如果不能更改标记。

堆栈sn-p

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>

    <div class="container">
        <div class="d-flex justify-content-end flex-row my-flex-container ">
            <div class="mr-auto p-2 my-flex-item"><img src="./images/webimage.png" alt="Mountain View"></div>                
            <div class="p-2 my-flex-item hello">
              <div>Quoriron</div>
              <div>Quoriron is a Quora clone, made with React/Redux and using Ruby-on-Rails as an APIQuoriron is a Quora clone, made with React/Redux and using Ruby-on-Rails as an APIQuoriron is a Quora clone, made with React/Redux and using Ruby-on-Rails as an API</div>            
              <div>Powered by: React, Rails</div>
            </div>
        </div>
    </div>