동일한 플렉스 박스 컨테이너에 수평 및 수직으로 항목을 쌓는 데 문제가 발생했습니다.

Question

부트 스트랩 플렉스 박스 컨테이너가 있는데, 왼쪽에있는 이미지를 가로로 유지하려고합니다.하지만 제목, 설명 및 전원 공급 섹션이 있습니다. 그것의 권리. 그러나 정렬을 변경하려고 할 때마다 찾을 수 있었던 유일한 옵션은 모든 내용 상자를 가로 또는 세로로 쌓아 올리는 것입니다. 수레를 피하고 싶습니다만 이미지를 가로로 정렬하고 3 개의 다른 텍스트 섹션을 세로로 정렬하는 것이 어떻게 가능합니까?

<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

당신은 하나

는 열, 흐름을 포장 용기를 높이 제공, 100 %로 이미지 플렉스 항목으로 높이를 설정하거나 텍스트 항목에 대한 래퍼를 추가 플렉스 사용할 필요가 .

열 방향을 사용하면 텍스트의 줄 바꿈이 계속 될 수 있으므로 동적 응답 솔루션의 경우 여분의 래퍼를 사용하는 것이 좋습니다.

주, 당신은 당신이 말한대로, 물론 float 캔 경우 마크 업을 할 수 없습니다, 이렇게, 내가 주 2

하지 않았다, 그에 따라 부트 스트랩 클래스를 조정해야하고, 변경 될 수 있습니다.

스택 그래서 기본적으로 내가이 효과를 달성하기 위해 필요로 할 때

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