Flex Container를 위한 속성들은 다음과 같습니다.
주 축(main-axis)과 교차 축(cross-axis)의 개념은 뒤에서 살펴봅시다.
display : Flex Container를 정의
display: flex : Block 특성의 Flex Container를 정의
display: inline-flex : Inline 특성의 Flex Container를 정의
→ flex 와 inline-flex 는 차이는 단순합니다.
flex로 지정된 Flex Container는 Block 요소와 같은 성향(수직 쌓임)을 가지며,
inline-flex로 지정된 Flex Container는 Inline(inline Block) 요소와 같은 성향(수평 쌓임)을 가집니다.
여기서 말하는 수직과 수평 쌓임은 Items 가 아니라 Container라는 것에 주의합시다.
두 값의 차이는 내부에 Items에는 영향을 주지 않습니다.
또 한 가지 주의할 점 : inline은 띄어쓰기에 약간의 공백을 주므로 공백 제거에 신경을 써야한다.
→ 두 Container 사이에 공백 발생
⚠️ display: flex가 선언된 Container의 item에 height, width를 아무리 큰 값을 선언 하여도 Container의 크기보다 커질 수는 없다.
flex-flow : flex-direction 와 flex-wrap 의 단축 속성
flex-flow: row wrap;
flex-direction : Flex Items의 주 축(main-axis)을 설정 (기본 값 : row)
flex-direction: row : Items를 수평축으로 표시
flex-direction: row-reverse : Items를 row 의 반대 축으로 표시
flex-direction: column : Items를 수직축으로 표시
flex-direction: column-reverse : Items를 column 의 반대 축으로 표시
⚠️ container 가 아닌 item 에도 flex-direction 속성을 줄 수 있다.
item 안에 items 들이 있으면 flex-direction 속성으로 item의 주 축을 설정할 수 있다.
(item 에 새로운 flex를 지정하지 않아도 가능)
flex-wrap : Flex Items의 여러 줄 묶음(줄 바꿈) 설정 (기본 값 : nowrap)
flex-wrap: nowrap : 모든 Items를 여러 줄로 묶지 않음(한 줄에 표시)
flex-wrap: wrap : Items를 여러 줄로 묶음
flex-wrap: wrap-reverse : Items를 wrap의 역 방향으로 여러 줄로 묶음
⚠️ 기본적으로 Items는 한 줄에서만 표시되고 줄 바꿈 되지 않습니다.
이는 지정된 크기(주 축에 따라 width 나 height) 를 무시하고 한 줄 안에서만 가변합니다.
Items를 줄 바꿈 하려면 값으로 wrap을 사용해야 합니다.
justify-content : 주 축(main-axis)의 정렬 방법을 설정 (기본 값 : flex-start)
justify-content: flex-start : Items를 시작점(flex-strat)으로 지정
justify-content: flex-end : Items를 끝점(flex-end)으로 지정
justify-content: center : Items를 가운데 정렬
justify-content: space-between : 시작 Item은 시작점에, 마지막 Item은 끝점에 정렬되고 나머지 Items 는 사이에 고르게 정렬됨
justify-content: space-around : Items를 균등한 여백을 포함하여 정렬
align-content : 교차 축(cross-axis)의 정렬 방법을 설정(2줄 이상) (flex-wrap: wrap)
(기본 값 : stretch)
align-content: stretch : Container의 교차 축을 채우기 위해 Items를 늘림
align-content: flex-start : Items를 시작점(flex-start)으로 정렬
align-content: flex-end : Items를 끝점(flex-end)으로 정렬
align-content: center : Items를 가운데 정렬
align-content: space-between : 시작 Item은 시작점에, 마지막 Item은 끝점에 정렬되고 나머지 Items 는 사이에 고르게 정렬됨
align-content: space-around : Items를 균등한 여백을 포함하여 정렬
⚠️ 값 stretch는 교차 축에 해당하는 items들의 너비(속성 width 혹은 height) 가 값이 auto일 경우
교차 축을 채우기 위해 자동으로 늘어납니다.
align-items : 교차 축(cross-axis)에서 Items의 정렬 방법을 설정(1줄)
Items가 한 줄일 경우 많이 사용합니다. (기본 값 : stretch)
align-items: stretch : Container의 교차 축을 채우기 위해 Items를 늘림
align-items: flex-start : Items를 각 줄의 시작점(flex-start)으로 정렬
align-items: flex-end : Items를 각 줄의 끝점(flex-end)으로 정렬
align-items: center : Items를 가운데 정렬
align-items: baseline : Items를 문자 기준선에 정렬
💡 flex-direction: column 속성의 부모 flex(content) 요소의 너비에 맞게 자식 flex(items) 요소
들의 너비를 늘려 가득 채우고자 할 때 자식 요소에 width 100%를 사용하는 방법이 존재하지만, 부모 요소에 align-items: stretch 으로 같은 효과를 줄 수 있습니다.
또한 가로로 가득 채우는 방법 외에도 flex-direction: row 인 상태에서 세로로, 즉 height 100% 의 효과를 줄 수도 있습니다.
⚠️ 주의할 점은 Items 가 flex-wrap을 통해 여러 줄(2줄 이상)일 경우에는 align-content 속성이
우선합니다. 따라서 align-items 를 사용하려면 align-content 속성을 기본값(stretch)으로 설
정해야 합니다.
⚠️ items 안에 있는 텍스트를 정중앙에 정렬하고자 한다면 items에도 display: flex를 선언하여
justify-content: center, align-items: center 이면 items 안의 요소도 가운데 정렬이 된다.
[ Justify-content ]