7. 위치 속성 CSS - Flex

Flex의 탄생 배경

기존 css로는 layout을 표현하기 어렵다는 단점을 보완하기 위해 만든 css attribute.

과거 layout을 표현하기 위해 사용한 attribute의 역사는 다음과 같다.

1. tabe -> layout을 위한 table과 실제 의미가 있는 table과 헷갈림.
2. position -> 좋은 방법. 하지만 element겹침 문제 발생
3. float -> 본래의도(어울림 효과)와 거리가 있다.

오직 layout 설정용으로 불의의 element 겹침을 방지하기위해 탄생한 것이 flex 되시겠다.

---

Flex

기본적으로 container와 item의 역할을 하는 tag가 존재해야한다.

<container>
  <item>...</item>
  <item>...</item>
</conatainer>

container(=flex container) 와 item(=flex item) 각각에는 다음과 같이 적용이 가능한 flex 관련 css attribute가 정해져있다.

Conatainer	Item
diplay : 해당 flex box의 박스 타입을 결정	order : 플렉스 컨테이너 안에 있는 플렉스 요소들의 순서를 설정
flex-direction : 플렉스 컨테이너(flex container)안의 플렉스 요소(flex item)가 위치할 방향을 설정	flex-grow
flex-wrap : 플렉스 라인에 더 이상의 여유 공간이 없을 때, 플렉스 요소의 위치를 다음 줄로 넘길지를 설정	flex-shrink
flex-flow : flex-direction + flex-wrap 과 같다.	flex-basis
justify-content : 플렉스 요소의 수평 방향 정렬 방식을 설정	flex : flex-grow + flex-shrink + flex-basis 와 같다
align-items : 플렉스 요소의 수직 방향 정렬 방식을 설정	align-self : 플렉스 요소마다 서로 다른 align 속성값을 설정
align-content : flex-wrap 속성의 동작을 변경할 수 있으며, 플렉스 요소를 정렬하는 대신에 플렉스 라인을 정렬

 이중에 많이 쓰이는 요소만 뽑아 예시를 보이도록 하겠다.

---

flex-direction / justify-content / align-items

container속성으로 가장 빈번히 쓰이는 flex 관련 css attribute이다.

item의 정렬을 간단히 하며 주로 item간의 배치를 유연하게 만들 때(item 간 겹치지않는다) 사용한다.

각 css 속성이 가질 수 잇는 값은 다음과 같다.

flex-direction	row : item을 가로로 배치한다. (default) col : item을 세로로 배치한다.
justify-content	flex-start : container 시작점 부터 순차적 배치 flex-end: container 끝 부터 순차적 배치(item간 순서변경은 없다) center: container 중앙 순차적 배치 space-around : item 주위에 동일한 간격을 두고 배치 space-between: item 사이에 동일한 간격을 두고 배치  space-evenly : item 사이에 간격에 동일한 간격을 두고 배치 ( item 시작전과 끝난 후에도 동일 간격)
align-items	flex-start : container 시작점 부터 순차적 배치 flex-end: container 끝 부터 순차적 배치(item간 순서변경은 없다) center: container 중앙 순차적 배치 base-line : container 시작위치에 정렬 stretch : 정렬없이 container 크기에 맞게 item크기를 늘린다.

 

justify-content는 flex-direction과 수평한 방향으로의 item배치를 하고 align-items는 flex-direction과 수직한 방향으로의 item 배치를 한다. 그러므로 justify-content와 align-items는 항상 수직관계를 가지고 있다.

flex-direction	justify-content	align-items
row	가로배치 정렬	세로배치 정렬
col	세로배치 정렬	가로배치 정렬

See the Pen Flex - direction, justify content, align-items by zakelstorm (@zakelstorm) on CodePen.

 

 

 

 

flex-wrap

container에서 사용하는 속성으로 Flex container에서 Flex item을 한 줄로 표시할 지, 또는 행(行)을 개행(줄 바꿈)해서 복수의 행(行)으로 표시할지 여부를 지정

wrap: flex item이 flex container 안에서 표시되도록 개행 허용.

nowrap: flex item이 flex container 밖에서 표시되더라도 개행 불허.

wrap-reverse: flex item이 flex container 안에서 표시되도록 개행 허용. 단, 역순으로 표시된다.

See the Pen Flex-flex-wrap by zakelstorm (@zakelstorm) on CodePen.

 

 

align-content

flex-wrap이 wrap상태일때 개행이 이뤄졌을때 내부 item을 어떻게 배치할 것인지에 대한 속성이다.

기본속성은stretch이다.

• flex-start: 개행이 될때 stretch되지 않은상태로 아이템들이 맨 윗줄에 배치된다.
• flex-end: 개행이 될때 stretch되지 않은상태로 아이템들이 맨 아랫줄에 배치된다.
• center: 개행이 될때 stretch되지 않은 상태로 가운데에 배치된다.
• space-between: 개행이 될때 stretch 되지 않은 상태로 맨윗줄과 맨 아랫줄에 배치된다.
• space-around: 개행이 될때 stretch 되지 않은 상태로 동일한 여백을 가지도록 배치된다.

 

align-self

item의 속성으로 item의 개별 align 상태를 지정한다. (align-items의 개별item 적용 버전)

auto(default) : align-items의 속성을 상속받는다.

stretch : container에 맞게 늘어난다:

center : container기준 중앙 align

flex-start : container 시작점에 위치.

flex-end : container 끝점에 위치

baseline : container의 기준선에 위치

See the Pen Flex - align-self by zakelstorm (@zakelstorm) on CodePen.

 

 

 

 

 

flex-grow / flex-shrink / flex-basis / flex

flex-grow

• flex item의 너비를 늘어나도록 정의해 줄 수 있는 속성. (default 0)
• flex-basis로 배치 후 남은 공간 중 얼마를 지정된 플렉스 항목에 비례하여 분배해야하는지 그 정도를 제어.
  
  • flex-grow가 0일 때의 경우에 container 너비를 기준으로 늘어나지 않기 때문에  각각의 item의 너비 지정값이 고정 너비가 된다.
• flex-direction에 따라 기준이 달라진다. row=>width, column=>height

flex-shrink

• flex item의 너비를 줄어들도록 정의해 줄 수 있는 속성. (default 1)
• flex container가 item의 너비의 합보다 작아졌을 때 각 아이템의 지정된 너비는 무시되면서 flex container 너비를 기준으로 각 item이 줄어들게 된다.
• flex-direction에 따라 기준이 달라진다. row => width, column=>height

flex-basis

• CSS에서 요소의 너비는 width로 정의하여 사용했지만 flex의 경우 item의 너비는 flex-basis를 사용하여 지정
• 기본공간을 의미하며 남는공간이나 부족한 공간은 flex-grow, flex-shrink에 의해 분배된다.
• px, %, em, rem 등의 실수치가 입력가능하다.

flex

• flex-grow [flex-shrink] [flex-basis]의 조합 (default : 0 1 auto)
• auto : 1 1 auto
• initial : 0 1 auto
• none : 0 0 auto 

See the Pen Flex- flex-grow/flex-shrink/flex-basis by zakelstorm (@zakelstorm) on CodePen.