플렉스 박스(Flex box, Flexible box) 기본 개념
플렉스 박스란?
레이아웃 모델로서 서로 다른 크기의 화면과 기기에서도 HTML 요소들이 자동으로 재정렬되고 언제나 레이아웃을 똑같이 유지할 수 있게 만들어준다.
플렉스 박스의 구성
<body>
<div class="container">
<div class="item item1">아이템 1</div>
<div class="item item2">아이템 2</div>
<div class="item item3">아이템 3</div>
</div>
</body>
플렉스 박스는 플렉스 컨테이너와 플렉스 아이템으로 구성된다.
플렉스 박스는 플렉스 아이템들을 하나로 묶어주는 역할을 한다.
그리고 박스 안에서 아이템들이 어떻게 배치될지 설정을 해준다.
플렉스 박스 설정하기
<body>
<style>
.container{display: flex; background: pink;}
.item{ width: 80px; height: 7vh; font-weight: bold; font-size: 15px;}
.item1{ background: red;}
.item2{ background: orange;}
.item3{ background: yellow; }
.item4{ background: green; }
.item5{ background: skyblue; }
</style>
<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>
</body>
HTML 상으로는 여러 아이템을 묶어줄 박스를 만들어주고 그 박스는 플렉스 컨테이너로 활용한다.
그리고 박스 안에 들어간 각 아이템들은 플렉스 아이템으로 이용해준다.
예시에선 우선 아이템으로 활용할 <div> 태그를 여러개 만들어줬다.
그후 <div> 태그를 묶어주는 <div>태그를 만들어서 컨테이너로 활용했다.
CSS 상으로는 플렉스 컨테이너에 아래 칸과 같이 속성값을 준다.
그러면 컨테이너 안의 아이템들이 위 그림처럼 기본 정렬인 row 상태로 정렬하게 된다.
|
display: flex; |
만약 컨테이너 안의 아이템 요소를 인라인 타입으로 정의하려면 아래와 같이 속성값을 주면된다.
( flex 박스 안에서 아이템의 기본 요소 타입은 block이다. )
|
display: inline-flex; |
플렉스 박스의 Axis(축) 개념
컨테이너 안에서 아이템들을 정렬할 때 축을 중심으로 정렬된다.
그래서 플렉스 박스를 이용할 때 축의 개념을 알아야 한다.
축은 메인 축(Main Axis)와 교차 축(Cross Axis) 두 가지가 있다.
플렉스 박스를 이용할 때 'flex-direction' 속성을 써서 이 메인축을 지정해줄 수 있다.
만약 메인 축을 수평축으로 지정한다면 그림처럼 된다.
만약 메인 축을 수직축으로 지정한다면 그림처럼 된다.
메인 축에 따라서 속성값을 다르게 주면서 아이템의 위치와 정렬을 마음대로 변경할 수 있다.
플렉스 박스에 줄 수 있는 속성들
플렉스 박스에는 여러가지 속성을 줄 수 있는데 크게 두 가지 성격의 속성으로 나뉜다.
1. 컨테이너에 줄 수 있는 속성
|
요소 |
설명 |
|
flex-direction |
수평 정렬 (row)와 수직 정렬(column) 두 가지를 방향으로 가능하다. |
|
justify-content |
|
|
align-items |
|
|
flex-wrap |
아이템을 다음 줄로 넘길지 한 줄에 몰아 넣을지 설정 |
|
flex-flow |
|
|
align-content |
|
|
align-items |
2. 아이템에 줄 수 있는 속성
|
요소 |
설명 |
|
order |
|
|
align-self |
|
|
flex |