[CSS] Flex

<div class="container">
	<div class="item">1</div>
	<div class="item">2</div>
	<div class="item">3</div>
</div>

 

div.container 부모요소/flex container/ flex의 영향을 받는 전체 공간.

div.item 자식요소/flex item/설정된 속성에 따라 각각의 아이템들이 어떤 형태로 배치되는 것.

 

flex container에 display: flex를 적용하는게 시작.

아이템들은 기본적으로 위 그림같이 배치가 된다. (가로방향으로)

그리고 자신이 가진 내용물의 width만큼만 차지하게 된다 (inline요소와 비슷)

 

flex-direction (배치 방향 설정)- 아이템들이 배치되는 축의 방향을 결정하는 속성
row;	(기본값) 가로 방향으로 배치
column;	역순으로 가로 배치
row-reverse;	세로 방향으로 배치
column-reverse;	역순으로 세로 배치

 

flex-wrap (줄넘김 처리 설정) - 아이템들을 한줄에 담을 여유 공간이 없을 때 아이템 줄바꿈을 결정하는 속성
nowrap;	(기본값) 줄바꿈 안함
wrap;	줄바꿈
wrap-reverse;	역순으로 줄바꿈

 

 

flex-flow - flex-direction과 flex-wrap을 한꺼번에 지정할 수 있는 단축 속성

flex-flow: row wrap;  (flex direction, flex-wrap 순으로 한칸 띄우고 쓰면 됨.)

 

 

 

정렬방식

 

justify-content 메인축 방향 정렬
flex-start; (기본값)	시작점으로 정렬
flex-end;	끝점으로 정렬
center;	가운데로 정렬
space-between	아이템들 사이에 균일한 간격을 만들어줌
space-around	아이템들 둘레에 균일한 간격을 만들어줌
space-evenly	아이템들 사이와 양 끝에 균일한 간격 만들어줌

 

 

align-items 수직축 방향 정렬
flex-stretch; (기본값)	아이템들이 수직축으로 쭉 늘어남
flex-start;	시작점으로 정렬 flex-direction이 row면 위, column이면 왼쪽
flex-end;	끝점으로 정렬 flex-direction이 row면 위, column이면 왼쪽
center;	가운데로 정렬
baseline	텍스트 베이스라인 기준으로 정렬

 

 

 

 

참고

studiomeal.com/archives/197