[CSS] FLEX 의 기본사용법

기본구조

flex는 container 와 item 의 두가지 요소로 구성된다. 

<div class="container">
	<div class="item">...</div>
	<div class="item">...</div>
	<div class="item">...</div>
</div>

 

기본사용

display:flex;

※ display:inline-flex; 는 인라인레밸의 컨테이너가 생성됨, 이렇게 적용하면 컨테이너의 정렬이 가로로 정렬된다. 

※ display:flex;  자식요소들이 flex item의 성격을 갖게 된다.

 

flex container 주요속성

justify-content

flex-start //기본값입니다. 좌측정렬
flex-end //우측정렬
center //가운데정렬
space-between //아이템과 아이템사이의 일정한 간격
space-around //아이템의 앞뒤로 일정한 간격을
space-evenly //아이템 외의 남는공간을 아이템 사이에 일정하게 배분

 

justify-content

nowrap //줄바꿈하지 않고 컨터이너를 벗어남
wrap //줄바꿈
wrap-reverse // 위로줄바꿈

 

flex-direction

row //가로방향으로 정렬 
column //세로방향으로 정렬 
row-reverse //가로로 정렬하되 역순으로 
column-reverse //세로로 정렬하되 역순으로 정렬

 

flex-flow

flex-flow: flex-direction flex-wrap 

flex-flow : row wrap //flex-direction의 row속성과 flex-wrap의 wrap

 

flex item 주요속성

flex-direction: row; //가로로
flex-basis: auto; // 공간배분전 기본넓이 설정, 컨테이너 너비만큼 줄어듬,  width 보다 우선함
flex-wrap; nowrap; // 줄넘김을 하지 않음
flex-grow; 0; // 여백을 채우려 늘이지 않음, 증가너비 비율, 크면 더 많은 너비가 늘어남
flex-shrink:1 ; // 너비가 좁아지면 같이 줄어듬, 감소너비 비율, 크면 더 많은 너비가 줄어듬

 

flex : 증가너비 감소너비 기본너비;

단축속성으로 사용할 수 있다. 

flex-grow를 제외한 개별속성은 생략이 가능하다.  flex-grow를 제외한 값은 생략이 가능하므로

flex 1;  = flex-grow:1; 과 같다.

 

이는 다른말로 바꾸면 flex 1; 은 flex-grow:1; 과  flex-shrink:1 과 flex-basis:auto; 와 같다. 

하지만, 유의할점은 flex 1: 일때 flex-basis 는 '0' 이된다. (flex 구문에서 예외적용)

 

바로 사용가능한 간편한 사용예

.parent {
    display: flex;
}
.child1 {
    flex: 2;
}
.child2 {
    flex: 1;
}

이경우에 child1 는 child2의 두배의 넓이를 가지게 된다.

(flex-grow 가 2:1이기 때문, 그냥 flex:1 을 주면 같은 넓이가된다)

 

 

 

FLEX의 한계 

IE 10부터 지원하기 때문에 -ms- 와 같은 prefix가 필요하다. ( -ms- 와 다른 값도 넣어주면 좋음)

display:-webkit-flex;
display:-moz-flex;
display:-ms-flex;
display:-o-flex;