CSS-Flex속성 정리

Flex 속성의 존재 이유

보통의 상황에서 요소(Elements)들의 구조를 만들 때에 수직적인 구조는 만들기가 쉬운 반면에

보통 수평구조를 만드는 속성이 명확하지 않기 때문에 float,inline-block를 사용해서 수평구조를 만들었지만

이러한 방법들은 해결은 가능하지만 여러가지 문제를 가지고 있습니다. (Clear,White-space 등)

하지만 이런 방법들은 차선책일 뿐입니다. 그래서 수평과 수직구조를 편하게 만들기위해서 flex속성을 사용합니다.

 

Flex의 개념

Flex는 Container와 item으로 구성되어 있습니다.

수평,수직구조를 정렬하기 위해서는 정렬되는 item을 담을 수 있는 Container가 필요합니다.

다만, Container와 item에 적용하는 속성이 구분되어 있습니다.

Flex-Container에 적용하는 속성

• display : Flex Container를 정의합니다.
• flex-flow : flex-direction과flex-wrap의 단축속성입니다.
• flex-direction : Flex-itmes의 주 축(main-axis)을 설정합니다.
• flex-wrap : Flex-items의 여러 줄 묶음(줄바꿈)을 설정합니다.
• justify-content : 주 축(main-axis)의 정렬방법을 설정합니다.
• align-content : 교차 축(cross-axis)의 정렬방법을 설정합니다 (2줄 이상)
• align-items : 교차 축(cross-axis)에서 items의 정렬방법을 설정합니다.

 

Container에서의 display

display 속성으로 Container를 정의합니다.

flex 속성을 사용할 때 정의할 수 있는 display는 flex와 inline-flex가 있습니다.

• Flex : Block 특성의 Flex Container를 정의합니다.
• inline-flex : inline 특성의 Flex Container를 정의합니다.

Flex 와 inline-flex의 차이는 간단합니다.

Container자체가 가지는 display속성이 block속성을 가질지 inline속성을 가질지를 결정합니다.

Container가 가진 Items에는 영향을 끼치지 않습니다.

 

flex-flow

이 속성은 단축 속성으로 Flex-items의 주 축을 설정하고 Items의 여러 줄 묶음(줄 바꿈)도 설정합니다.

기입방법은 다음과 같습니다.

ex ) flex-flow : flex-direction값 felx-wrap값;

 

flex-direction

Items의 주 축을 설정합니다. 속성값은 다음과 같습니다.

• row : Items를 수평축(왼쪽에서 오른쪽으로)으로 표시합니다. 기본값입니다.
• row-reverse : Items를 row축의 반대 축으로 표시합니다.
• column : Items를 수직축(위에서 아래로)으로 표시합니다.
• column-reverse : Items를 columne의 반대 축으로 표시합니다.

주 축(Main-axis)과 교차 축(cross-axis)의 개념

주 축의 값이 row일때 주 축은 수평이 되고 교차 축은 수직이 됩니다.

반대로 주 축의 값이 column일때 주 축은 수직이 되고 교차 축은 수평이 됩니다.

시작점(flex-start)과 끝점(flex-end)의 개념

시작점과 끝점은 주 축이나 교차 축의 시작하는 지점과 끝나는 지점을 지칭합니다.

방향에따라서 시작점과 끝점이 달라집니다.

 

flex-wrap

기본적으로 Items는 한 줄에서만 표시되고 줄 바꿈 되지 않습니다.

이는 지정된 크기(주 축에 따라 width나 height)를 무시하고 한 줄안에서만 가변합니다.

Items를 줄바꿈 하려면 wrap를 사용해야 합니다.

• nowrap : 모든 Items를 여러 줄로 묶지 않음(한 줄에 표시)
• wrap : Items를 여러 줄로 묶음
• wrap-reverse : Items를 wrap의 역방향으로 여러 줄로 묶음

justify-content

주 축(main-axis)의 정렬방법을 설정합니다.

• flex-start : Items를 시작점(flex-star)으로 정렬
• flex-end : Items를 끝점(flex-end)으로 정렬
• center : items를 가운데 정렬
• space-between : 시작 Item은 시작점에, 마지막 Item은 끝점에 정렬되고 나머지 Items는 사이에 고르게 정렬합니다.
• spcae-around : Items를 균등한 여백을 포함하여 정렬합니다.

align-content

교차 축(main-axis)의 정렬방법을 설정합니다.

주의할 점은 flew-wrap 를 통해서 Items가 여러줄(2줄 이상)이고 여백이 있을 경우만 사용할 수 있습니다.

• stretch : Container의 교차 축을 채우기 위해 Items를 늘림. 기본값 입니다.
• flex-start : Items를 시작점(flex-start)으로 정렬
• flex-end : Items를 끝점(flex-end)으로 정렬
• center : Items를 가운데 정렬
• space-between : 시작 Item은 시작점에, 마지막 Item은 끝점에 정렬되고 나머지Items는 사이에 고르게 정렬됨.
• space-around : Items를 균등한 여백을 포함하여 정렬

align-items

교차 축(main-axis)에서 Items의 정렬방법을 설정합니다. Items가 한 줄일 경우 많이 사용합니다.

주의할 점은 Items가 flex-wrap 을 통해 여러 줄 일 경우에는 align-content 속성이 우선합니다.

따라서 align-items를 사용하려면 align-content 속성을 기본값(stretch)으로 설정해야 합니다.

• stretch : Container의 교차 축을 채우기 위해 Items를 늘림
• flex-start : Items를 시작점(flex-start)으로 정렬
• flex-end : Items를 끝점(flex-end)으로 정렬
• center : Items를 가운데 정렬
• baseline : Items를 문자 기준선에 정렬

 

Flex-Items에 적용하는 속성

• order : Flex Item의 순서를 설정
• flex : flex-grow , flex-shrink , flex-basis의 단축 속성
• flex-grow : Flex Item의 증가 비율을 설정
• flex-shrink : Flex Item의 감소 너비 비율을 설정
• flex-basis : Flex Item의 (공간배분전) 기본 너비 설정
• align-self : 교차 축에서 Item의 정렬 방법을 설정

order

Item의 순서를 설정합니다.

Item의 숫자를 지정하고 숫자가 클 수록 순서가 밀립니다. ex ) 순서 -1 > 100 > 10000

음수 값을 넣을 수 있습니다. 기입 방법은 다음과 같습니다.

ex ) order: 숫자;

flex

Item의 너비(증가,감소,기본)를 설정하는 단축 속성 입니다.

flex-glow를 제외한 개별 속성은 생략 할 수 있습니다. ex ) flex : 1; 은 flex-glow : 1;과 같다.

생략된 값들은 기본값으로 적용 됩니다. 다만 flex-basis의 기본값은 auto이지만 단축 속성인 flex에서 값을 생략할 경우에는 0이 적용됩니다.

기입 방법은 다음과 같습니다.

ex ) flex : 증가너비 감소너비 기본너비;

flex-grow

Item의 증가 너비 비율을 설정합니다.

숫자가 크면 더 많은 너비를 가집니다.

Item이 가변너비가 아니거나, 값이 0일 경우 효과가 없습니다.

flex-shrink

Item이 감소하는 너비의 비율을 설정합니다.

숫자가 크면 더 많은 너비를 가집니다.

Item이 가변너비가 아니거나, 값이 0일 경우 효과가 없습니다.

flex-grow와 달리 계산식이 다르고 복잡하기 때문에 활용도가 떨어집니다.

flex-basis

Item의 (공간 분배 전) 기본 너비를 설정합니다.

값이 auto일 경우 width, height 등의 속성으로 Item의 너비를 설정할 수 있습니다.

하지만 단위 값이 주어질 경우 설정할 수 없습니다.

속성값은 auto 와 px,em,cm등의 단위를 사용할 수 있습니다.

align-self

교차 축에서 개별 Item의 정렬 방법을 설정합니다.

align-itmes는 Container 내 모든 Items의 정렬방법을 설정합니다.

하지만 필요에 의해 일부 Item만 정렬 방법을 변경하려고 할 경우 align-self를 사용할 수 있습니다.

이 속성은 align-items 속성보다 우선합니다.

• auto : Container의 align-items 속성을 상속 받습니다.
• stretch : Container의 교차 축을 채우기 위해 Item을 늘립니다.
• flex-start : Item을 각 줄의 시작점(flex-start)으로 정렬합니다
• flex-end : Item을 각 줄의 끝점(flex-end)으로 정렬합니다.
• center : Item을 가운데 정렬합니다.
• baseline : Item을 문자 기준선에 정렬합니다.