[ 5 ] flex 속성 정리 1편

 

flex 속성들 정리하기

flex-direction : row

main axis 는 아이템의 크기만큼 차지한다. 

cross axis 는 가장 높이가 높은 아이템의 크기와 일치하게 설정된다.

단, flex-container의 높이가 정해져 있으면 그 크기로 cross axis 의 크기가 정해진다.

flex-direction : column

main axis는 아이템의 크기만큼 차지한다.

cross axis는 container 의 너비로 크기가 정해진다.

flex 는 display : block 속성 요소이므로 container의 width를 정해주지 않으면 기본적으로 전체 너비가 된다.

 

flex-flow

flex-direction 과 flex-wrap ( default 값은 nowrap 이다 ) 을 한꺼번에 지정할 수 있는 단축 속성이다.

.container {
	
    flex-flow : row wrap;

}

 

main axis  정렬 : justify-content : 

.container {

    justify-content : flex-start;
    justify-content : flex-end;
    justify-content : center ;
    justify-content : space-between;
    justify-content : space-around;
	justify-content : space-evenly;
}

 

 

cross axis 정렬 : align-items :

default 값은 stretch 이다. 

.flex-container {
	align-items : stretch;
    align-itmes : center;
}

 

cross  axis 정렬 2 : align-content :

flex-wrap : wrap; 이 설정된 상황에서 , 아이템들의 행이 2줄 이상이 되었을때 수직축 방향 정렬을 결정하는 속성이다

 

 

flex-basis

flex-basis는 Flex ' 아이템 ' 의 기본 크기를 설정한다. ( flex-direction 이 row 일 때는 너비 , column 일 때는 높이 )

만약 flex-basis를 100px 을 준다면 아이템의 크기가 100px 보다 작을 경우에는 100으로 , 이상일 경우 그 크기로 설정된다.

width 는 아이템의 크기가 width로 설정해준 값 이상이더라도 무조건  해당 width 로 고정한다는 점에서 flex-basis와 차이를 갖는다.

.item{
	flex-basis : auto;   // default 값
    flex-basis : 100px;
}

 

flex-grow 

flex-grow 는 ' 아이템 ' 이 flex-basis 의 값보다 커질 수 있느지를 결정하는 속성이다.

기본값인 0 보다 큰 값이 세팅이 되면 해당 아이템이 유연한 ( Flexible ) 박스로 변하고 원래의 크기보다 커지며 빈 공간을 메우게 된다.

flex-grow 에 들어가는 숫자의 의미는 , 아이템들의 flex-basis 를 제외한 여백 부분을 flex-grow 에 지정된 숫자의 비율로 나눠 가진다는 뜻이다.

 

.item {
	flex-grow : 0; // default
}

 

flex-shrink

flex-grow 와 쌍을 이루는 속성으로, 아이템이 flex-basis의 값보다 작아질 수 있는지를 결정한다.

기본값이 1이기 때문에 , 따로 세팅하지 않아도 아이템이 flex-basis 보다 작아질 수 있다.

 

.item {
	flex-shrink : 1 ; //default

	flex-shrink : 0 ; // 크기가 줄어들지 않는다
}

 

flex

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

 

.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-basiss: 500px;
}

 

flex-grow와 flex-basis로 너비 설정을 해줄 때 주의사항

만약 아이템의 컨텐트 가 너무 크면 , flex-basis 가 0 이라고 해도 원하는 비율대로 고정되지 않는다. 

강제적으로 비율을 유지하고 싶다면 width 속성을 사용해야 한다.

 

 

여기서 하나의 item을 더 추가하면 width 도 작동하지 않는다?

위의 예시코드에서 item 을 하나 더 추가하면 width 속성 설정을 20% 60% 20% 해줬더라도 작동하지 않고 하나의 요소가 생긴다.

그 이유는 flex-shrink : 1 로 되어있기 때문이다. ( 공간을 축소해서 새로운 item이 들어갈 자리를 만든다 ) 

 

 

해결방법

container의 속성에 flex-wrap : wrap 속성을 부여하면 새로 생기는 요소가 다음 칸에 생성되게 된다.

 

 

맨 아래줄을 보기 좋게 늘리는 방법

auto 를 붙이지 않으면 다시 한줄이 되는데, 그 이유는 flex-basis 가 0 이 되어 버려서 그 공간을 아이템들이 일정하게 나눠 갖기 때문이다.

** flex-grow 는 width 보다 우선순위가 높다. 따라서 flex : 1 ; 이 적용되어 버린다.

.flex-item {
	flex : 1 auto;
}

 

auto 를 붙이지 않은 오류