Display : Flex
display : flex
flex에 대해 알아보자. 기본적인 html구조는 이렇다.
<div class="container">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
</div>container라는 박스내에 item박스 3개로 구성되어 있다.
container가 flex의 영향을 받는 전체 공간이고, 설정된 속성에 따라 각각의 아이템들이 어떤 형태로 배치되는지 알아보자.
display : flex
flex의 속성들은
- 컨테이너에 적용하는 속성
- 아이템에 적용하는 속성
이 두가지로 나뉜다.
먼저, 컨테이너에 적용하는 속성들부터 알아보자.
시작은 flex컨테이너에 dispaly : flex;를 적용하는 것이다.
그러면 block요소들인데도, inline요소처럼 좌에서 우로 item박스들이 배치된다.
item박스들은 자신이 가진 width만큼 차지하게 되는데, height는 컨테이너의 높이만큼 알아서 늘어난다.
flex-direction
아이템들이 배치되는 축의 방향을 결정하는 속성이다.
.container {
flex-direction : row; // 기본값
flex-direction : row-reverse; // 우에서 좌로 배치
flex-direction : column; // 세로로 배치 (그냥 block을 쌓은것처럼)
}줄넘김 처리 (flex-wrap)
컨테이너가 더이상 아이템들을 한줄에 담을 공간이 없을때 아이템 줄바꿈을 어떻게 할지 결정하는 속성이다.
.container {
flex-wrap : nowrap; // 기본값 (item들이 container를 벗어나도 그대로 벗어남)
flex-wrap : wrap; // 컨테이너 공간을 벗어나게 되면 아래로 배치함
}정렬
justify : 메인축
align : 수직축
메인축방향 정렬 (justify-content)
메인축방향으로 아이템들을 정렬하는 속성이다.
.container {
justify-content : flex-start; // 기본값(아무것도 변하지 않음)
justify-content : flex-end; // 우로 정렬
justify-content : center; // 가운데 정렬
justify-content : space-between; // 아이템이 3개라면 1번은 맨왼쪽, 2번은 가운데, 3번은 맨 오른쪽 배치
}수직축방향 정렬 (align-items)
수직축방향으로 아이템들을 정렬하는 속성이다.
.container {
align-items : center; // 가운데 정렬
}활용해보면
justify-content : center;
align-itmes : center;
를 해주면 큰 레이아웃이든, 박스안에든 작은 아이콘이든, 간단하게 화면 정중앙에 오게 할 수 있다.
