📝 CSS 레이아웃 스타일, FLEX
#230214
📌 Flexbox
요소의 정렬되는 방향, 순서, 요소간의 간격을
수치적으로 처리하지 않아도 알아서 유연하게 처리해주는 형식
🏷️ Flexbox를 이용할 때 반드시 알아야 되는 것!
1. Flexbox의 구성
-
flex-container: 정렬이 필요한 요소를 감싸는 요소 -
item: 정렬을 적용할 요소
(flex-container와 item에 사용되는 flex 관련 css 속성이 나누어져 있음)
item에 별도 width/height가 지정되어 있지 않으면
flex-container와 동일하게 된다.
💻 flex 사용하면 컨테이너 안에
display: flex;문구를 꼭 써준다.`display: flex;`의미 : item을 감싸는 요소의 형식을 모두 flex로 변경함. (item에 지정된 margin 요소가 모두 사라ㅣㅈ고 content 영역 만큼의 크기만 가짐)
2. Flexbox의 축
- 중심축
- 교차축, 반대축
1. [flex-direction] 속성
flex-container의
main axis의 방향과 시작위치를 지정하는 전용 속성
-
flex-direction: row;: 행방향 (가로, 기본값) -
flex-direction: row-reverse;: 행방향 (가로 + 순서반대) -
flex-direction: column;: 열방향 (세로) -
flex-direction: column-reverse;:열방향 (세로 + 순서반대)
2. [flex-wrap] 속성
flex-container의
내부 item들을 포장하는 속성
-
flex-wrap : nowrap: item 한줄로 배치(기본값) -
flex-wrap: wrap;: item을 여러줄로 배치 -
flex-wrap : wrap-reverse;: item을 여러줄로 배치 (뒤에서부터 배치)
3. [flex- flow] 속성
flex-direction + felx-wrap 합친 모양
flex-container의
main axis의 방향, 순서와 여러줄로 배치할지에 대한 여부를 한번에 설정하는 속성
예시))
flex-flow : row-reverse wrap;4. [justify-content] 속성
item(내용)의 정렬 방법을 조정하다
-
justify-content: flex-start;: main axis 시작 기점으로 정렬 (기본값) -
justify-content: flex-end;: main axis끝 지점을 기준으로 정렬함 -
justify-content: center;: main axis 가운데 정렬 -
justify-content: space-around;:
item 주위에 main axis 방향 양쪽으로 일정한 크기에 공간을 추가
->양 끝은 조금, item 중간은 넓게 떨어져 있음. -
justify-content: space-evenly;:
item이 main axis 내에서 동일한 간격을 가지게 됨 -
justify-content: space-between;:
space-evenly에서 양 끝을 flex-container에 붙게함
5. [align-items] 속성
item들을 cross axis (반대축, 교차축) 방향으로 정렬하는 방법을 지정하는 속성
-
align-items: stretch;:
item들의 너비 또는 높이를 cross axis 방향으로 늘려서
flex-container와 같은 크기를 가지도록함
(조건 : item에 cross axis 방향의 크기 지정 속성이 없어야함) -
align-items: flex-start;: 플렉스 컨테이너의 시작부분을 기준 -
align-items: flex-end;: 플렉스 컨테이너의 끝부분을 기준 -
align-items: center;: 플렉스 컨테이너의 가운데 기준 -
align-items: baseline;: 플렉스 컨테이너의 기준선(baseline)에 배치
