无法在同一个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 列换行流程，为容器指定高度，将图像弹性项目的高度设置为100％，或者为文本项目添加包装。

使用列方向，您仍然可能最终对文本进行另一次换行，因此对于动态响应解决方案，我建议使用额外的包装器。

注意，您需要相应地调整Bootstrap类，我没有

注意2，正如您所说，如果标记无法更改，(let ((ba va) (bb vb)) ...) ; === ((lambda (ba bb) ...) va vb) 当然可以这样做。

Stack snippet

＆＃13;

＆＃13;

float

＆＃13;

＆＃13;

＆＃13;