CSS Flex - 컨테이너 설정

 

 

flex-direction

.container{
	display: flex;
	flex-direction: row;
}

   - 플렉스 컨테이너 내의 아이템을 배치할 때 사용할 주축 및 방향을 지정해주는 요소입니다.

   - 기본은 column으로, 가로축이 주축, 세로축이 교차축으로, 아이템들이 위에서 아래로 배치됩니다.

   - row

      : 세로축을 주축으로 변화시킵니다.

      : 가로축이 교차축이 되며, 아이템들이 왼쪽에서 오른쪽으로 배치됩니다.

   - column-reverse, row-reverse

      : 각자 column과 row와 동일하지만, 시작점과 끝점이 반대로 적용됩니다.

 

 

flex-wrap

   - flex-item 요소들이 강제로 한줄로 표현될 지, 여러행으로 나누어 표현할 것인지 결정하는 속성입니다.

   - flexbox의 기본 속성은 부모 요소의 크기를 넘지 않기 위해 flex-item 들의 크기가 조절됩니다.

     flex-wrap 속성을 사용하여 이를 막을 수 있습니다.

   - 기본값은 nowrap으로, 무조건 한줄에 배치합니다.

      wrap : 내부 로직에 의해 분할, 여러행에 걸쳐서 배치됩니다. 일반적으로 위에서 아래로 쌓입니다.

      wrap-reverse : wrap과 동일하지만 쌓이는 순서가 반대가 됩니다.

 

 

flex-flow (shorthand)

flex-flow : row wrap;

flex-flow : column wrap;

   flex-direction과 flex-wrap 두가지 속성을 함께 사용할 수 있는 단축속성입니다.

   - 두 속성을 스페이싱으로 구분하여 나열하여 사용합니다.

 

 

 

justify-content

/* Positional alignment */

justify-content: center;	/* 가운데 정렬 */

justify-content: start;		/* 시작점 정렬 */

justify-content: end;		/* 끝점 정렬 */

justify-content: flex-start;	/* flex item들을 시작점 정렬 */

justify-content: flex-end; 	/* flex item들을 끝점 정렬 */

justify-content: left; 		/* 왼쪽 정렬 */

justify-content: right; 	/* 오른쪽 정렬 */


/* Baseline alignment */
/* justify-content does not take baseline values */

/* Normal alignment */
justify-content: normal;

/* Distributed alignment */

justify-content: space-between; /* 시작 item과 끝 item은 끝에 붙이고, 
				사이 item들의 간격을 균등하게 위치시킵니다.*/
                
justify-content: space-around; /* 각 item들의 좌우 여백을 동일하게 분배합니다.
				중간 여백은 items의 여백 두개가 맞닿으므로 양 끝 여백 크기의 2배가 됩니다.*/
                
justify-content: space-evenly; /* item들의 사이 간격을 동일하게 분배합니다. */

justify-content: stretch;

/* Overflow alignment */

justify-content: safe center;

justify-content: unsafe center;

/* Global values */

justify-content: inherit;

justify-content: initial;

justify-content: revert;

justify-content: revert-layer;

justify-content: unset;

   - 주축을 기준으로 아이템들의 정렬상태를 설정합니다.

 

align-item

align-items: stretch;

align-items: center;

align-items: start;

align-items: end;

   - 교차축을 기준으로 아이템들의 정렬 상태를 조절합니다.

   - height가 설정된 부모 컨테이너 상에서 items의 교차축 위치를 지정하는데 사용합니다.

   - 컨테이너 내 items가 한 줄일 경우 사용합니다.

 

align-content

align-content : start;

align-content : center;

align-content : space-between;

align-content : space-around;

 

   - 컨테이너 내 items가 여러 줄일 경우 교차축 기준 정렬을 조절합니다.

   - 해당 속성을 사용하여 행렬을 구현하려고 할때 flexbox보다는 grid 레이아웃을 사용하는 것이 좋습니다.