오늘 작업을하며 flex때문에 하루종일 고생했다.. 사실 어제부터..
FLex 레이아웃을 만들기 위한 기본적인 html구조는 다음과 같다.
부모요소인 div.container를 Flex Container(플렉스 컨테이너)라고 부르고,
자식요소인 div.item들을 Flex Item(플렉스 아이템)이라고 부른다.
컨테이너가 Flex의 영향을 받는 전체 공간이고, 설정된 속성에 따라 각각의 아이템들이 어떤 형태로 배치되는 것
flex의 속성들은
1.컨테이너에 적용하는 속성
2.아이템에 적용하는 속성
이렇게 두가지로 나뉜다.
먼저, 컨테이너에 적용하는 속성들부터 알아보자!
flex 컨테이너에 적용하는 속성들
display: flex;
flex 컨테이너에 display:flex;를 적용하는게 시작이다.
이 한줄의 css만으로 아이템들은 기본적으로 아래 그림과 같이 배치된다.
위가 block이고 밑이 flex다.
flex아이템들은 가로 방향으로 배치되고, 자신이 가진 내용물의 width만큼만 차지하게 된다. 마치 inline요소들처럼.
height는 컨테이너의 높이만큼 늘어난다.
height가 알아서 늘어나는 특징은 컬럼 레이아웃을 만들 때 아주 편리하겠다.
(물론 나중에 정렬 속성을 통해 height를 어떻게 처리할지도 조정할 수 있다.)
ㄴ컬럼의 높이가 자동으로 잘 맞는다.
inline-flex도 있는데, 이건 block과 inline-block의 관계를 생각하면 된다.
아이템의 배치와 관련이 있다기보다는 컨테이너가 주변 요소들과 어떻게 어우러질지 결정하는 값이다.
inline-flex는 inline-block처럼 동작한다.
아이템들이 배치된 방향의 축을 메인축(Main Axis),
메인축과 수직인 축을 수직축 또는 교차축(Cross Axis)라고 부른다.
좀 뜬금없지만 ,앞으로 원활한 이해를 위해 메인축을 오뎅꼬치라고 생각하자.
나중에 정렬을 배울 때 헷갈리지 않으려는건데, 오뎅(Flex아이템)들이 꼬치(메인축)을 따라 쭉 꽂혀서 정렬된 상태를 생각하고 있으면 된다.
[참고: https://studiomeal.com/archives/197 1분코딩 - 이분이베프 ]
TIP
Flex의 방향이 column일 경우 justify-content의 방향이 세로로, align-items의 뱡향이 가로로 바뀐다.
justify-content
flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다.
flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다.
center: 요소들을 컨테이너의 가운데로 정렬합니다.
space-between: 요소들 사이에 동일한 간격을 둡니다.
space-around: 요소들 주위에 동일한 간격을 둡니다.
---------------- align-items
flex-start: 요소들을 컨테이너의 꼭대기로 정렬합니다.
flex-end: 요소들을 컨테이너의 바닥으로 정렬합니다.
center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬합니다.
baseline: 요소들을 컨테이너의 시작 위치에 정렬합니다.
stretch: 요소들을 컨테이너에 맞도록 늘립니다.
------------ flex-direction
row: 요소들을 텍스트의 방향과 동일하게 정렬합니다.
row-reverse: 요소들을 텍스트의 반대 방향으로 정렬합니다.
column: 요소들을 위에서 아래로 정렬합니다.
column-reverse : 요소들을 아래에서 위로 정렬합니다.
