Flexbox가 나오기 전까지는 position, float , inline-block 등을 사용해 블록을 정렬했다. 하지만 데스크탑 시대를 벗어나 모바일 시대로 접어들면서 보다 유연한 형태의 레이아웃 매커니즘이 필요해졌다.
그에 따른 차세대 레이아웃에는 Flexbox, Grid 등이 있으며, 이 포스팅에서는 그 중 Flexbox에 대해 다뤄보겠다.
이 Flexbox 레이아웃을 형성하는 가장 기본적인 요소는 컨테이너(container)와 항목(items) 이다. 이 플렉스 항목의 가장 기본적인 기능은 컨테이너 내에서 크기를 유연하게 조절하는 능력이다.
즉, 공간에 따라서 가로 또는 세로의 길이를 조절할 수 있고, 공간에 대한 비율을 기반으로 크기를 조절할 수 있다. 또, 순서와 방향도 쉽게 정할 수 있다.
우선 Flexbox를 사용 방법을 보기 위해 다음과 같이 HTML 코드를 작성한다.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flexbox</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="container">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
<div class="item item6">6</div>
<div class="item item7">7</div>
<div class="item item8">8</div>
<div class="item item9">9</div>
<div class="item item10">10</div>
</div>
</body>
</html>
컨테이너에 속성값 부여
Flexbox 레이아웃을 사용하기 위한 첫 번째 단계는 컨테이너에 display: flex; 를 주는 것이다. 컨테이너에 flex 속성 값을 주는 순간, 안에 있는 item들이 가로로 정렬되는 것을 볼 수 있다.
flex-direction: row; 가 기본적값이고 생략해도 상관 없다.
순서를 거꾸로 출력하려면 컨테이너에 flex-direction: row-reverse; 로 세팅하면 된다.
내부 박스들을 가로가 아닌 세로로 정렬하고 싶을 때는 flex-direction: column; 을 사용한다. 역시 거꾸로 출력하려면 column-reverse; 를 사용하면 된다.
또 컨테이너 내부에 박스가 많아질 경우 어떻게 처리할건지를 나타낼 수 있는 속성값이 있다.
/* 한줄에 아무리 박스가 많아져도 한줄에 정렬됨(nowrap) */
flex-wrap: nowrap;
/* 한줄에 박스가 꽉차면 다음 라인으로 넘어감(wrap)*/
flex-wrap: wrap;
border값을 지정하는 것처럼 한번에 flex-direction과 flex-wrap에 값을 줄 수도 있다. flex-flow: column nowrap;
다음은 내부 박스를 어떻게 배치할건지를 나타내는 속성 값이다.
/* 아이템을 어떻게 배치할건지(왼쪽 정렬 혹은 오른쪽 정렬 혹은 가운데 정렬)를 결정함 */ /*기본값: flex-start(왼쪽에서부터 정렬) */ justify-content: flex-start; /* 박스 오른쪽으로 정렬 */ justify-content: flex-end; /* 박스 가운데 정렬 */ justify-content: center;
다음은 가로로 박스를 어떻게 정렬할건지를 나타내는 속성값이다.
/* 박스 사이에 일정한 간격을 준다.(대신 처음과 끝 박스의 간격이 조금 다름, 박스가 마진을 가지는거라고 생각) */ justify-content: space-around; /* 처음과 끝 박스의 간격도 똑같이 부여 */ justify-content: space-evenly; /* 처음과 끝 박스는 부모에 붙이고, 남은 박스들에 간격을 주는것 */ justify-content: space-between; /* main axis */
이번엔 세로로 박스를 어떻게 정렬할건지를 나타내는 속성 값이다.
/* 수직으로 가운데 정렬을 하고싶을때 사용*/ align-items: center; /* 아이템에 padding 값이 있어서 텍스트 위치가 박스하나의 위치가 바뀌었을때 베이스라인에 맞출수있다. */ align-items: baseline; /* justify와 반대되는 개념. 수직으로 간격을 줌 , justify에 사용되는 모든 값 동일하게 사용 가능*/ align-content: space-between; }
아이템에 속성값 부여
- 박스의 순서를 바꿀때 사용하는 속성값
.item1 {
background: #ef5350;
/* 박스의 순서를 바꿀수 있다. */
order: 2 ; (두번째로 감)
}
- 스크린이 커지거나 작아질때 박스가 커지는 비율 및 작아지는 비율 설정 속성값
.item2 {
background: #ec407a;
/* 컨테이너가 커져도 박스는 원래 크기를 유지한다(디폴트) 만약 커졌을때 박스의 크기를 키우고싶으면 flew-grow 사용 */
flex-grow: 1;
/* 컨테이너가 작아질때 어떻게 작아져야하는지 flex-shrink 사용*/
flex-shrink: 1;
/* 박스의 flew-grow를 2로 주면 컨테이너가 커질때 다른 박스에 비해 2배로 커짐.*/
flex-grow: 2;
/* 컨테이너가 작아질때 2배로 빨리줄어듬*/
flex-shrink: 2;
}
- 박스가 항상 컨테이너에 내에서 일정 비율을 차지하게끔 만들어주는 속성값
.item5 {
background: #29b6f6;
/* 컨테이너의 width의 몇프로를 항상 차지하게 만들수있는 것 (절대값으로 지정) */
flex-basis: 40% : 항상 40%차지
}
- 하나하나의 박스도 따로 정렬이 가능하다.
.item8 {
background: #ffee58;
/* 박스 위치를 따로 배정가능하다 (수직으로) */
align-self: center;
}
이 속성값들 역시 border 에 속성 값을 주는 것처럼, 한 번에 사용 가능하다.
flex: 2 2 auto; /* grow, shrink, basis */
퍼가욧!! 6666