CSS(플렉스박스 레이아웃)

*플렉스 박스 레이아웃

1차원 방식으로 효과적인 레이아웃을 설계할 수 있도록 고안된 스타일 속성

가로(row)나 세로(column)중 한 방향으로만 레이아웃을 설계하는 방식

플렉서블은 ‘신축성 있는’, ‘유연한’이라는 뜻이므로 다양한 상황에서 유연하게 레이아웃을 구성할 수 있도록 제공한다는 의미

 

 

 

display 속성

display:flex; /* inline-flex */

적용된 요소의 다음 요소가 항상 줄 바꿈되고, inline-flex는 다음 요소가 주변에 배치

display 속성이 지정된 요소는 플렉스 컨테이너, 자식 요소는 플렉스 아이템

 

flex-direction 속성

플렉스 박스 레이아웃의 주축 방향을 결정

flex-wrap 속성

플렉스 아이템이 컨테이너 영역을 벗어날 때 어떻게 처리 할지 결정

기본값은 nowrap(일정한 크기까지는 찌그러지다가 더이상 공간이 없으면 넘어감)

flex-flow 속성

flex-direction 속성과 flex-wrap 속성을 한 번에 사용

flex-flow:<flex-direction> <flex-wrap>;

flex-flow: column nowrap;

 

 

플렉스 박스 레이아웃의 정렬 속성

 

justify-content 속성

플렉스 아이템을 주축 방향으로 정렬 할 때 사용하는 속성

align-items, align-content, align-self 속성

 

 

Container(부모) 속성

display: flex 가로로 배치됨 (블럭의 특성을 가짐, 최대화 특성)

display: inline-flex 가로로 배치되지만 inline 특성을 가짐 (최소화 특성)

flex-direction: 수평, 수직 그리고 시작 위치와 방향을 결정 함. row, row-reverse, column, column-reverse

flex-wrap: 묶음 여부를 결정(줄바꿈과 관련 됨), 기본값은 nowrap (아이템의 총크기보다 container의 크기가 작으면 찌그러져서 표현 됨), wrap은 줄바꿈이 일어 남.

justify-content: 주축의 정렬 방법을 결정 함 (flex-start, flex-end, center, space-between, space-around, space-evenly)

align-content: 교차축에 대한 여러줄에 대한 정렬 방법 (flex-start, flex-end, center, space-between, space-around, space-evenly)

align-items: 교차축에 대한 한 줄 정렬 방법 (flex-start, flex-end, center)

flex-flow: flex-direction과 flex-wrap을 한꺼번에 지정할 수 있는 단축 속성(row wrap)

 

items(자식) 속성

flex-grow: 증가 비율을 조정 함, 기본값은 0

order: 아이템의 순서를 지정할 수 있음, 기본값은 0, 숫자가 작을 수록 앞에 표시 됨.html을 수정하지 않고도 순서 변경 가능한 장점이 있음

flex-shrink: 감소 너비 비율 지정, 기본값은 1, 0으로 지정하면 container가 줄어 들더라도 찌그러지지 않음

flex-basis: 기본값은 auto, content의 크기에 영향을 받음, 안받게 할려면 0으로 지정

 

 

 

 

 

정리