html - 无法在同一个 flexbox 容器中水平和垂直堆叠元素

Question

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

    <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 方向上，您仍然可能会在文本上再次换行，因此对于动态的响应解决方案，我建议使用额外的换行符。

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

注意 2，正如您自己所说，如果标记无法更改，float 当然可以做到这一点。

堆栈片段

<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>