복잡한 레이아웃을 css의 display, float, position 등의 속성을 사용해 구성하는 것은 몹시 어려운 일입니다.
css3에 추가된 flexbox를 이용해 요소의 크기와 순서를 유연하게 배치하는 법을 알아보겠습니다.
flexbox
flex는 부모요소와 자식요소로 나누어집니다. 이를 Container와 Items라고 하는데 Container는 Items를 감싸는 부모요소이며 Items는 정렬이 될 개체들입니다.
먼저 flexbox를 구성해보도록 하겠습니다.
html>
<div class="box-container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
css>
.box-container {
display: flex;
}이렇게 코드를 작성하면 box-container는 Container가 되고 box들은 Items가 되어 가로배치됩니다.
item들은 flex를 적용하면 가로배치되면서 width는 자신의 내용물만큼, height는 컨테이너의 높이만큼 늘어납니다.
이때 기본적으로 정렬이 된 왼쪽에서 오른쪽 방향을 주축(main axis) 주축에 수직인 위에서 아래방향을 교차축(Cross axis)라고 합니다. 앞으로 Items들을 정렬할 때 필요한 개념입니다.
이제 속성들을 소개해보겠습니다.
flex-direction
아이템들이 배치되는 주축의 방향을 결정하는 속성입니다.
.box-container {
flex-direction: row;
/* flex-direction: column; */
/* flex-direction: row-reverse; */
/* flex-direction: column-reverse; */
}row, column, row-reverse, column-reverse 네가지 값이 있는데 기본은 row이고 아이템들이 왼쪽에서 오른쪽 가로방향으로 배치됩니다.
column은 주축이 수직방향으로 변경되고 위에서 아래로 차례대로 배치됩니다.
-reverse는 축은 앞에 설명드린대로이고 아이템이 쌓이는 방향이 반대가 됩니다.
flex-wrap
.box-container {
flex-wrap: nowrap;
/* flex-wrap: wrap; */
/* flex-wrap: wrap-reverse; */
}flex-wrap속성은 아이템이 한줄에 다 담기지 않을 때 줄바꿈을 할지 결정하는 속성입니다.
기본값은 nowrap이며 줄바꿈을 하지않고 넘치면 그대로 container를 넘어갑니다.
wrap은 container안에서 줄바꿈을 합니다.
wrap-reverse는 줄바꿈을 하는데,아이템이 교차축의 반대반향으로 배치됩니다.
justify-content
.box-container {
justify-content: flex-start;
/* justify-content: flex-end; */
/* justify-content: center; */
/* justify-content: space-between; */
/* justify-content: space-around; */
/* justify-content: space-evenly; */
}justify-content는 메인축 방향으로 아이템들을 정렬하는 속성입니다.
flex-start는 기본값으로 아이템들을 메인축 시작방향으로부터 차례로 정렬합니다.
flex-end는 메인축 끝으로 정렬합니다.
center는 아이템을 메인축 중심으로 정렬합니다.
space-between은 아이템 사이에 동일한 간격을 만들어 줍니다.
space-around는 아이템의 둘레에 균일한 간격을 만들어줍니다.
space-evenly는 아이템 사이와 양끝에 균일한 간격을 만들어줍니다.
align-items
.box-container {
align-items: stretch;
/* align-items: flex-start; */
/* align-items: flex-end; */
/* align-items: center; */
/* align-items: baseline; */
}stretch는 아이템이 수직축 방향으로 container의 끝까지 늘어납니다.
flex-start는 아이템들을 수직축 방향의 시작점으로 정렬합니다.
flex-end는 아이템들을 수직축 방향의 끝점으로 정렬합니다.
center는 아이템들을 수직축의 가운데로 정렬합니다.
baseline은 아이템을 텍스트 베이스라인 기준으로 정렬합니다.
