주문

Question

나는이처럼 보이는 인 flexbox 요소가 오른쪽에 버튼이 있습니다.

나는 작은 화면 (폭) 최소화하면 왼쪽 이렇게 압축 실험되었다 : 폭이 상기 압축

경우 deletebutton (새싹)는 잃었다. 플렉스 랩 기능을 추가하면 삭제 버튼이 첫 번째로 wrap됩니다. 나는 그것을 마지막으로 원한다. 이것이 가능한가?

psudo 코드 :

<style> 
    div.leftRow { 
    display: flex; 
    flex-direction: row; 
    flex-wrap:wrap; 
    justify-content: flex-start; 
    align-items: center; 
    align-content: center; 
    } 
    div.split{ 
    display:flex; 
    flex-direction:row; 
    justify-content: space-between; 
    } 
</style> 
<div class="split"> 
    <div> 
    <div class="leftRow"> 
     <span>Title</span> 
     <span>Description</span> 
    </div> 
    <div class="leftRow"> 
     <button>BuS</button> 
     <button>BuC1</button> 
     <button>BuC2</button> 
    </div> 
    </div> 
    <button style="align-self:center">BuD</button> 
</div> 

Answer 1

당신은 row-reverse 대신 row 사용할 수 있습니다.

div.leftRow { 
 
    display: flex; 
 
    flex-direction: row-reverse; 
 
    flex-wrap:wrap; 
 
    justify-content: flex-end; 
 
    align-items: center; 
 
    align-content: center; 
 
} 
 
div.split { 
 
    display:flex; 
 
    flex-direction:row-reverse; 
 
    justify-content: space-between; 
 
} 
 
button { 
 
    min-width: 400px ; 
 
}

<div class="split"> 
 
    <button style="align-self:center">BuD</button> 
 
    <div> 
 
    <div class="leftRow"> 
 
     <span>Title</span> 
 
     <span>Description</span> 
 
    </div> 
 
    <div class="leftRow"> 
 
     <button>BuS</button> 
 
     <button>BuC1</button> 
 
     <button>BuC2</button> 
 
    </div> 
 
    </div> 
 
</div>