블록체인 기술사업 교육 23일차

flex

- Flexbox라고도 부르며 CSS의 레이아웃 배치 기능 중 하나

- 컨테이너에 display: flex; 를 적용해야 사용 가능

flex-direction 

- 요소 배치 방향 설정

- row(→), row-reverse(←), coulmn(↓), coulmn-reverse(↑)

- column, column-reverse를 적용하면 justify-content와 align-items가 반대로 적용됨

=> justify-content = 수직 방향, align-items = 수평 방향

justify-content

- 수평축 방향 정렬 

- flex-start(기본- 좌측 정렬), flex-end(우측 정렬), center(중앙)

출처 : https://studiomeal.com/archives/197

- space-between(요소들 사이에 동일 간격), space-around(요소들 주위에 동일 간격)

- space-evenly(요소들의 사이와 양 끝에 동일 간격)

align-items 

- 수직축 방향 정렬

- flex-start(맨 위), flex-end(맨 아래), center(세로 기준 가운데)

- stretch(컨테이너에 맞춰서 길이 설정), baseline(시작 위치)

※ justify-content: center; align-item: center; 설정 시 브라우저 창 정중앙에 위치하게 됨

flex-wrap 

- 줄넘김 설정

- nowrap(창이 좁아져도 다음줄로 안 넘어가고 요소 너비가 감소), wrap(줄넘김), wrap-reverse(줄넘김 역방향)

flex-flow

- flex-direction과 flex-wrap을 한번에 지정할 수 있는 속성
- flex-direction, flex-wrap의 순으로 입력

align-content 

- 여러 행의 수직 축 정렬 (flex-wrp: wrap;이 설정되어 있어야함)

- flex-start(여러 줄을 맨 위에 정렬), flex-end(여러 줄을 맨 아래에 정렬), center(여러 줄을 세로 기준 가운데에 정렬)

- space-between(여러 줄들 사이에 동일한 간격), space-around(여러 줄들 주에 동일한 간격)

- stretch(여러 줄을 컨테이너에 맞춰서 세로 길이를 늘림)

align-self 

- align-items가 사용하는 값들을 인자로 받아 그 값을 지정한 요소에만 적용

- auto(align-items 속성을 상속받아 적용), stretch, flex-start(맨 위), flex-end(맨 아래), center(가운)

order

- 플렉스 요소들의 순서를 설정

z-index

- position의 z-index와 동일

Flexbox Froggy (Flex 연습 사이트)

https://flexboxfroggy.com/#ko

Flexbox Froggy