Flex 속성(아이템에 적용하는 속성)

 

flex-basis

flex 아이템들의 기본 크기를 설정한다, width, height 등 단위 값들이 들어간다

.item {
	flex-basis: auto;		// 기본값(해당 아이템의 width값 사용)
	flex-basis: 0;			// 크기 0
	flex-basis: 50%;		// 크기 50%
	flex-basis: 300px;		// 전체 크기 300px
	flex-basis: 10rem;		// 기준값의 x 10
	flex-basis: content;	// width값을 따로 설정하지 않은 경우 컨텐츠의 크기를 설정
}

flex-grow

flex-basis의 값보다 커질 수 있는지를 결정하는 속성, 값이 0 보다 크면 원래의 크기보다 커지며 빈 공간을 메우게 된다

.item {
	flex-grow: 1;
	flex-grow: 0;   // 기본값 
}

flex-shrink

아이템이 flex-basis의 값보다 작아질 수 있는지를 결정한다, 0보다 큰 값이 세팅이 되면 flex-basis 값보다 작아진다

.item {
	flex-basis: 150px;
	flex-shrink: 1; // 기본값
}

flex

flex-grow, flex-shrink, flex-basis를 한 번에 쓸 수 있는 축약형 속성

.item {
	flex: 1;           //flex-grow: 1; flex-shrink: 1; flex-basis: 0%;
	flex: 1 1 auto;    //flex-grow: 1; flex-shrink: 1; flex-basis: auto;
	flex: 1 500px;     //flex-grow: 1; flex-shrink: 1; flex-basis: 500px;
}

z-index

z축으로 아이템을 정렬한다, 숫자가 클수록 다른 아이템들보다 앞에 정렬된다

.item {
	z-index: 1;		  // 해당 .item은 다른 요소들보다 값이 클 경우 앞으로 배치된다
}