flex 관련 속성

● flex-direction 속성 - 아이템의 배치 방향을 결정 - flex-direction: row | row-reserve | column | column-reverse | initial | inherit - row : 가로로 정렬 (기본값) - row-reserve : 가로로 오른쪽에서 정렬 - column : 세로로 정렬 - column-reverse : 세로로 밑에서부터 정렬 - initial : 기본값으로 설정 - inherit : 부모 요소로부터 상속받음 ● flex-wrap 속성 - 아이템이 컨테이너의 공간을 넘칠 경우, 아이템의 줄바꿈을 어떻게 할 것이지 결정하는 속성 - flex-wrap: nowrap | wrap | wrap-reverse | initial | inherit - n..

flex 관련 속성 정리 3 1. flex-basis 속성 - 아이템들의 기본 크기를 설정 (flex-direction이 row 일 경우 너비, column 일 경우 높이를 조절함) - 0, %, px, rem 등으로 설정 가능 ※ flex-basis에서 설정한 너비가 이미 넘은 아이템일 경우, 축소되지 않음 → 그럴 경우, word-wrap: break-word를 적용하여, 설정한 너비만큼 줄어들고 남은 텍스트는 줄바꿈됨 AAA BBB CCC .container { border: 1px solid black; width: 500px; height: 200px; display: flex; font-size: 2rem; font-weight: bold; } .container > div { margin: ..

flex 관련 속성 정리 2 1. justify-content 속성 - 메인축 방향으로 아이템들을 정렬 ※ justify와 align - justify : 메인축(가로 방향)으로 정렬 - align : 수직축(세로 방향)으로 정렬 - flex-start (기본값) : 아이템들을 시작점으로 정렬 (flex-direction이 column일 경우, 위로 정렬) A B C .container { border: 1px solid black; width: 400px; height: 100px; display: flex; font-size: 2rem; font-weight: bold; justify-content: flex-start; } .container > div { width: 50px; height: 50..

flex 관련 속성 정리 1 1. display: flex 속성 - 레이아웃을 배치하는데 사용 - 속성에 따라 각각의 아이템들이 어떠한 형태로 배치되는지 설정 - display: flex를 적용하면 블록 형태로 배치된 div가 가로 방향으로 배치 red blue green /* display: flex를 적용할 경우, 세로로 배치되었던 아이템들이 가로로 배치됨 */ .container {display: flex;} .box { width: 100px; margin: 10px; font-size: 2rem; font-weight: bold; } .red {background-color: red;} .blue {background-color: blue;} .green {background-color: gre..