Flexbox_3

flex item : flex container의 자식 요소

 

▶ order (현업에서 자주사용X)

• flex item의 배치 순서를 지정
• html의 요소를 임의적으로 바꿈

<div class="flex-container">
	<div class="flex-item item1">1</div>
	<div class="flex-item item2">2</div>
</div>

.flex-container{
	display:flex;
}
.item1{
	order:1;
}
.item2{
	order:0;
}

order에 따라 순서가 바뀐것 확인

▶ flex-grow (기본값:1)

• flex-item의 너비 확대에 대한 인자 설정
• container의 나머지 너비를 채움
• item2의 증가폭이 2배가 됨

.flex-container{
	display:flex;
}
.item1{
	flex-grow:1;
}
.item2{
	flex-grow:2;
}

• 너비가 증가했을 때, item2가 더 많이 확대된 것 확인

 

▶ flex-shrink (기본값:0)

• flex-grow와 반대로 감소할 때 얼만큼 줄어들지에 대한 설정 

 

▶ flex-basis (기본값:auto)

• flex-item의 너비값을 설정
• px,%,vw 등으로 설정가능

 

▶ flex (기본값 : 0 1 auto)

• flex-grow flex-shrink flex-basis 한번에 설정

▶ align-self

• flex-item을 개별적으로 flex container의 cross axis로 정렬
• 우선적으로 개별 flex item 정렬
• flex-container로 정렬되어 있어도 align-self 설정 시, 개별적으로 우선하여 설정되어짐