CSS3 display:flex

justify-content

-Container안에 있는 Item들을 수직방향으로 정렬하는 방법을 지정합니다.

-Item 의 행의 간격 / 열의간격을 한번에 줄 수 있다 ( gap: 행값px 열값px )

• flex-start          Container안에 있는 Item들을 상단에 정렬함 (기본값) 
• flex-end              Container안에 있는 Item들을 오른쪽으로 정렬함 
• center                 Container안에 있는 Item들을 수평방향의 중앙에 정렬함 
• space-between     Container안에 있는 Item들을 일단 양쪽끝에 붙히고 나머지 Item들을 일정간격으로 정렬함 

justify-content : center;

justify-content : space-between;

align-items

 -Container안에 있는 Item들을 수직방향으로 정렬하는 방법을 지정합니다.

• flex-start          Container안에 있는 Item들을 상단에 정렬함 (기본값) 
• flex-end           Container안에 있는 Item들을 하단에 정렬함 
• center              Container안에 있는 Item들을 수직방향의 중앙에 정렬함 
• baseline            Container안에 있는 Item들을 baseline으로 정렬함 
• stretch              Container안에 있는 Item들을 Container의 높이와 동일하게 상하로 늘려서 상단과 하단에 정렬함 

align-items:center;

aling-items : stretch; // height 값이 없어야 적용

align-content

 -Container안에 있는 Item들이 여러 줄로 표시될 때 수직방향으로 정렬하는 방법을 지정합니다. 

 

• flex-start           Container안에 있는 여러 줄의 Item들을 모두 상단에 정렬함 (기본값) 
• flex-end            Container안에 있는 여러 줄의 Item들을 모두 하단에 정렬함 
• center               Container안에 있는 여러 줄의 Item들을 모두 수직방향의 중앙에 정렬함 
• space-between   Container안에 있는 Item들의 줄을 일단 상단과 하단 끝에 붙히고 나머지 Item들을 일정간격으로 수직방향으로 정렬함 
• space-around      Container안에 있는 Item들의 줄을 일정간격으로 수직방향으로 정렬함 
• stretch               Container안에 있는 Item들의 줄의 높이를 Container의 높이와 맞게 늘려서 정렬함 

align-content : center;

item이 두줄 이상일 때 기본값(space-between) 사이 간격을 없애준다

 

align-content:center; justify-content:center

position 값 없이 센터를 맞출 수 있다

- Item 설정

Item들에 대한 설정으로 Item의 넓이, 순서 등 Item의 개별적인 속성에 대한 설정 방법입니다.

order

Container안에서 Item의 순서를 지정합니다. 음수값도 사용할 수 있으며 숫자가 작을 수로 왼쪽에, 클수록 오른쪽에 위치합니다.

flex-grow

• flex-grow와 반대로 각 Item의 넓이를 배수로 빼집니다.
• item-1의 flex-grow가 1이고 item-2의 flex-grow가 2라면
• item-2는 item-1보다 2배가 작게 됩니다. 
• 기본값은 1 이며 음수는 사용하지 않습니다.