수직 플렉스 박스에서 어린이의 제한 너비

Question

어떻게하면 수직 플렉스 박스의 내용으로 자식 너비를 제한 할 수 있습니까? 시안 색 배경으로 볼 수 있듯이 자식 너비는 컨테이너의 너비를 차지합니다. 필요로하는 너비 만 차지하고 싶습니다.

.container{ 
 
    display: flex; 
 
    background: yellow; 
 
    flex-direction: column; 
 
    padding: 5px; 
 
} 
 

 
.content{ 
 
    background: cyan; 
 
    margin: 5px; 
 
}

<div class="container"> 
 
    <div class="content">hello whats up</div> 
 
    <div class="content">hello whats up</div> 
 
</div>

Answer 1

가요 성 용기의 초기 설정 align-items: stretch이다.

이 설정을 사용하면 플렉스 항목이 컨테이너의 가로 축의 전체 길이를 확장시킵니다. (이 설정은 flexbox의 동일한 높이의 열을 허용합니다.) flex-direction: column에있을 때 가로 축이 수평이므로 어린이는 기본적으로 컨테이너의 전체 너비를 확장합니다.

기본값을 컨테이너에서 align-items: flex-start으로 대체하거나 각 flex 항목에서 align-self: flex-start으로 재정의 할 수 있습니다.

.container{ 
 
    display: flex; 
 
    background: yellow; 
 
    flex-direction: column; 
 
    padding: 5px; 
 
} 
 

 
.content{ 
 
    background: cyan; 
 
    margin: 5px; 
 
    align-self: flex-start; /* NEW */ 
 
    
 
}

<div class="container"> 
 
    <div class="content">hello whats up</div> 
 
    <div class="content">hello whats up</div> 
 
</div>

참고 :

• How to disable equal height columns in Flexbox?
• In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?