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

Question

我有一个 bootstrap 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%，或者为文本添加一个包装项目。

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

注意，你需要相应地调整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>

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

Trouble stacking items horizontally and vertically in same flexbox container

html

css

flexbox

twitter-bootstrap-4