플렉스에 대해 알아보자.
Grid의 경우 IE에서 사용이 불가능하기 때문에 아직까지 IE를 사용하는 공기업이 많은 우리나라의 입장에서는 그리드만으로 만들기는 어렵기 때문에 플렉스의 활용이 중요하다.
: flexbox라 불리는 Flexible Box는 공간의 배분와 정렬을 위한 CSS의 속성으로 주로 레이아웃을 설정할때 사용된다.
보통 레이아웃을 정렬할때 CSS에서 display: block
, display: inline-block
등을 이용해 라인을 정렬하는 경우가 많았다. 이제는 이 방법이 아닌 flex
를 사용해보자.
이 flex는 주로 가로축과 세로축을 기준으로 표현하게 되는데 그 축에 대해 먼저 알아보자
: 기준이 되는 축에 대한 개념으로 축은 총 4가지로 구분된다
아래 예시에서 파란색 박스를 Item, 점선을 컨테이너라고 해보자.
: 이처럼 축방향을 기준으로 속성을 줄 수 있다.
<div class='container'>
<div>Flex1</div>
<div>Flex2</div>
<div>Flex3</div>
</div>
<div class='container'>
<div>Flex1</div>
<div>Flex2</div>
<div>Flex3</div>
</div>
.container {
display: flex
}
.container {
display: flex
flex-direction: column
}
: 부모 Container에 여러 속성을 넣어 자식 Item들을 정렬할 수 있다.
: justify-content 를 이용한다.
.container {
display: flex
justify-content: center
}
.container {
display: flex
flex-direction: column
justify-content: center
}
flex-direction
설정이 column으로 되어있다면 justify-content
는 세로축
을 정렬시킨다.: align-item 을 이용한다.
.container {
display: flex
align-item: center
}
align-item
은 justify-content
와 다르게 교차 축을 정렬시킨다.: align-item 은 부모안의 모든 item들을 정렬했다면 그중 한가지만 개별 적용을 할때는 align-self를 사용한다.
: 사실 item에 width 값을 주어 설정해도 된다. width에 퍼센트 값으로 반응형 크기도 만들 수 있다.
그치만 여러가지 방법들도 한번 알아보자.
.item {
flex: 1 1 20px; /* 증가너비 감소너비 기본너비 */
flex: 1 1; /* 증가너비 감소너비 */
flex: 1 20px; /* 증가너비 기본너비 (단위를 사용하면 flex-basis가 적용됩니다) */
}
참고자료 : 링크