CSS 플렉스에서 타일 레이아웃의 문제점
타일 레이아웃의 첫 번째 문제점은 대체로 바로 명확하게 드러납니다.
부모 요소에 명시적으로 높이를 설정해야 한다는 점이 매우 불편합니다.
우리의 경우 블록 수가 동적으로 변경되어 9개보다 많거나 적을 수도 있는 상황이 충분히 발생할 수 있기 때문입니다.
두 번째 문제점은 블록 수가 마지막 행에 충분한 수의 블록이 없을 경우 발생합니다. 이 경우 마지막 행이 보기 흉하게 나타납니다:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
</div>
.parent {
display: flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
width: 320px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
결과적으로, 우리의 경우 수평 방향에서도 space-between 값이 제대로 작동하지 않습니다.
요약하자면: 자식 요소의 수가 항상 일정하고 부모 요소에 잘 맞는다면, space-between을 이용한 타일 레이아웃은 꽤 편리한 방법입니다.
그렇지 않은 경우에는 다른 방법을 고민해야 합니다.
12개의 요소가 주어졌습니다.
요소의 너비를 100px로, 요소 사이 간격을 20px로 설정하여 한 줄에 4개씩 배치된 타일 레이아웃을 만드세요.
12개의 요소가 주어졌습니다.
요소의 너비를 150px로, 요소 사이 간격을 10px로 설정하여 한 줄에 3개씩 배치된 타일 레이아웃을 만드세요.
