[HTML/CSS] Flex 활용방법

[HTML/CSS] Flex 활용방법

플렉스는 정렬을 위한 CSS 도구이다.

줄을 바꾸어 배치할 지 등을 선언하고, 내 마음대로 위치를 바꾸어 쓸 수 있다.

예전에는 float를 어떻게 해서 XX발광을 하면서 코드를 스파게티로 만들었다가 씻어서 짜장면으로 만든 다음에 짜장 튀김을 만드는 과정을 겪고 크기가 다른 사진들을 아주 보기좋게 가운데에 차례로 정렬한다던지 했는데,

 

플렉스는 그게 필요없다. 모든 요소들이 다 들어가있다.사진 1개만 특별한 위치에 가있다던지 하는 것이 가능한 것이다. (align-self)

(처음 나왔을 때 프론트 개발자들은 저러지 않았을까...)

 

 

아래에서 활용법을 자세히 알아보자.

 

 

Flexible box

레이아웃 배치 전용 기능으로 고안되었다.

display: inline-block; float: left;

아직 많이 쓰이고 있지만, 점점 안쓰이고 있는 추세라고 한다. 왜냐하면 레이아웃 배치 전용 기능으로 고안된 **‘flexible box’**가 있기 때문이다. Grid도 많이 쓰이는 기능이다.

플렉스에서는 부모요소를 Flex Container라고 부르고, 자식 요소인 div.item들을 Flex Item(플렉스 아이템)이라고 부른다. 컨테이너가 Flex의 영향을 받는 전체 공간이고, 설정된 속성에 따라 각각의 아이템들이 어떤 형태로 배치되는 것이다.

 

Flex 시작

.클래스 {
	display: flex;
}

Flex 아이템들은 가로 방향으로 배치되고, 자신이 가진 내용물의 width 만큼만 차지하게 된다.(마치 inline 요소들 처럼) height는 컨테이너의 높이만큼 늘어난다.

 

 

각각의 컨테이너 안에서 큰 제목의 괄호 안에 있는 영어가 속성으로 작용한다.

flex-direction: row;

이런 식으로 사용된다.

 

배치 방향 설정(flex-direction)

💡 : 가로 배치 또는 세로 배치를 결정한다.

 

<vaule>

 

값(value)	기능
row(default)	아이템을 수평축으로 표시(왼쪽에서 오른쪽)
row-reverse	아이템을 수평축으로 표시(오른쪽에서 왼쪽)
column	아이템을 수직축으로 표시(위에서 아래로)
column-reverse	아이템을 수직축으로 표시(아래에서 위로)

 

줄넘김 처리 설정(flex-wrap)

💡 : 한 줄이 꽉 찰때, 다음 줄로 내려 보낼지, 아니면 빠져 나가게 그냥 둘지를 결정하는 것.

 

<vaule>

 

값(value)	기능
nowrap(default)	모든 아이템을 여러줄로 묶지 않음(빠져 나간다)
wrap	아이템을 여러 줄로 묶음
wrap-reverse	아이템을 역방향으로 여러 줄 묶음

 

<wrap과 reverse 비교>

 

wrap	wrap-reverse
A B C D E	D E A B C

 

 

메인축 방향 정렬(justify-content)

💡 x축 방향으로 아이템을 정렬한다.

 

<vaule>

 

값(value)	기능
flex-start(default)	아이템을 시작점으로 정렬
flex-end	아이템을 끝점으로 정렬
center	아이템을 가운데 정렬
space-between	시작 아이템은 시작점에, 마지막 아이템은 끝점에 정렬되고 나머지는 아이템은 두 점 사이에 고르게 정렬됨
space-around	아이템의 둘레에 균등한 여백을 포함하여 정렬함.
space-evenly	아이템들의 사이와 양 끝에 균일한 간격을 만들어 줌.

 

수직축 방향 정렬(align-items)

💡 y축 방향으로 아이템을 정렬한다.

 

<vaule>

 

값(value)	기능
stretch(default)	컨테이너의 교차 축을 채우기 위해 아이템을 늘여서 배치
flex-start	아이템을 각 줄의 시작점으로 정렬
flex-end	아이템을 각 줄의 끝점으로 정렬
center	아이템을 가운데 정렬
baseline	아이템을 문자 기준선에 정렬

 

여러 행 정렬(align-content)

💡 flex-wrap: wrap; 이 설정된 상태에서 행이 두 줄 이상 되었을 때 ‘수직축’ 방향 정렬을 결정하는 속성

 

<vaule>

justify-content의 value들을 활용한다.

 

 

이외에도 align-self, order 등의 값이 있다.