컨테이너 요소의 display CSS 속성 값을 flex 로 함으로써 해당 요소의 자식들에 대한 정렬을 시작할 수 있다.
부모 속성
align-content
플렉스 박스 전체에 대한 아이템들의 정렬이다.
속성값
center : 가운데 정렬
flex-start : 시작 부분 정렬
flex-end : 끝 부분 정렬
space-around : 각 줄 사이의 공간은 같으나 처음과 끝 여유 공간은 각 줄 사이 공간의 절반
space-between : 각 줄 사이의 공간을 같게 하고 처음과 끝은 여유 공간이 없음
space-evenly : 각 줄 사이의 공간과 양 끝 공간이 동일
stretch : Container의 교차 축을 채우기 위해 Items를 늘림
(중요) align-items
flex-direction에서 설정된 방향에 수직한 방향으로의 정렬에 대한 설정이다.
속성값
center : 가운데 정렬
flex-start : 시작 부분 정렬
flex-end : 끝 부분 정렬
stretch : 늘이기
(중요) flex-direction
컨테이너가 가지는 자식요소들이 정렬되는 방향이다.
기본값 : row
속성값
row : 행(가로) 방향 정렬
row-reverse : row 방향 역순 정렬
column : 열(세로) 방향 정렬
column-reserve : column 방향 역순 정렬
flex-wrap
컨테이너의 범위를 벗어나는 자식에 대한 개행 설정이다.
기본값 : nowrap
속성값
nowrap : 개행하지않음
wrap : 개행함
(중요) justify-content
flex-direction에서 설정된 방향에 수평한 방향으로의 정렬에 대한 설정이다.
속성값
center : 가운데 정렬
flex-start : 시작 부분 정렬
flex-end : 끝 부분 정렬
stretch : 늘이기
/* 항목을 열 방향으로 왼쪽 상단으로 수직정렬 */
display : flex;
/* 항목을 열방향으로 정렬 */
flex-direction : column;
/* 세로로 맨위부터 정렬 */
align-items : flex-start;
/* 가로로 맨 처음으로 정렬 */
justify-content : flex-start;
자식 속성
align-self
부모에서 지정한 align-items 를 무시하고 본 요소에 대한 정렬을 별도로 지정한다.
속성값은 align-items 와 동일하다.
/* 위에서 지정한 맨처음 정렬을 무시하고 해당하는 항목을 가운데로 정렬 시킨다.*/
align-self : center;
flex
늘어나고(flex-grow), 줄어드는(flex-shrink) 비율 및 flex-basis (기본크기)를 지정한다.
