Stacks
Stacks
flexbox 유틸리티 위에 구축된 축약(shorthand) 헬퍼로, 컴포넌트 레이아웃을 그 어느 때보다 빠르고 쉽게 만들어 주는 헬퍼예요.
출처: 문서
본문
Stacks는 다수의 flexbox 속성을 적용하는 지름길을 제공해서 Bootstrap에서 레이아웃을 빠르고 쉽게 만들 수 있게 해 줘요. 이 개념과 구현에 대한 모든 공로는 오픈 소스 Pylon 프로젝트에 있어요.
Heads up! flexbox와 함께 gap 유틸리티를 지원하는 것은 Safari 14.5 이전 버전에서는 사용할 수 없으므로, 의도한 브라우저 지원 범위를 확인해 보는 게 좋아요. Grid 레이아웃은 문제가 없어요.
세로 (Vertical)
.vstack을 사용해 세로 레이아웃을 만들어요. 쌓인 항목들은 기본적으로 전체 너비예요. 항목 사이에 공간을 추가하려면 .gap-* 유틸리티를 사용해요.
<div class="vstack gap-3">
<div class="p-2">
First item
</div>
<div class="p-2">
Second item
</div>
<div class="p-2">
Third item
</div>
</div>
가로 (Horizontal)
.hstack을 사용해 가로 레이아웃을 만들어요. 쌓인 항목들은 기본적으로 세로로 가운데 정렬되고 필요한 너비만 차지해요. 항목 사이에 공간을 추가하려면 .gap-* 유틸리티를 사용해요.
<div class="hstack gap-3">
<div class="p-2">
First item
</div>
<div class="p-2">
Second item
</div>
<div class="p-2">
Third item
</div>
</div>
.ms-auto 같은 가로 마진 유틸리티를 스페이서로 사용하기:
<div class="hstack gap-3">
<div class="p-2">
First item
</div>
<div class="p-2 ms-auto">
Second item
</div>
<div class="p-2">
Third item
</div>
</div>
그리고 세로 구분선(vertical rule)과 함께:
<div class="hstack gap-3">
<div class="p-2">
First item
</div>
<div class="p-2 ms-auto">
Second item
</div>
<div class="vr">
</div>
<div class="p-2">
Third item
</div>
</div>
예시 (Examples)
.vstack을 사용해 버튼과 다른 요소들을 쌓아 보세요:
<div class="vstack gap-2 col-md-5 mx-auto">
<button class="btn btn-secondary" type="button">
Save changes
</button>
<button class="btn btn-outline-secondary" type="button">
Cancel
</button>
</div>
.hstack으로 인라인 폼 만들기:
<div class="hstack gap-3">
<input aria-label="Add your item here..." class="form-control me-auto" placeholder="Add your item here..." type="text"/>
<button class="btn btn-secondary" type="button">
Submit
</button>
<div class="vr">
</div>
<button class="btn btn-outline-danger" type="button">
Reset
</button>
</div>
CSS
scss/helpers/_stacks.scss
.hstack {
display: flex;
flex-direction: row;
align-items: center;
align-self: stretch;
}
.vstack {
display: flex;
flex: 1 1 auto;
flex-direction: column;
align-self: stretch;
}