Flex 레이아웃 행열 사이공간 만들기

Flex 레이아웃 행열 사이공간 만들기

HTML 코드

<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
</div>

 

CSS 코드


.container {
display: flex;
flex-wrap: wrap;
padding: 1rem;</code>

row-gap: 1rem;
column-gap: 1rem;
}
.item {
flex-grow: 1;
flex-shrink: 0;
}

상하좌우 여백을 일정하게 주며 반응형 레이아웃을 만들때 사용합니다.