CSS flex box

1. flex box

flex

{ display : flex } : 항목이 행으로 나열된다.

div 태그는 한줄을 다 차지하는 태그이지만, { display : flex } 속성을 추가하면, height와 width가 내용의 크기만큼만 늘어난다.

좌 ) flex 안함, 우 ) display 속성에 flex 추가

inline-flex

컨테이너가 컨테이너 주변 요소들과의 조화를 생각할때 사용하면 된다. 

 

flex를 추가하면 컨테이너가 한 줄 전체를 차지한다.

.container {
  background-color: aqua;
  display: flex;
  /* display: inline-flex; */
}

display 속성에 flex 추가

inline-flex를 차지하면 컨테이너는 내부 요소들의 width만큼만 자리를 차지한다.

.container {
  background-color: aqua;
  /* display: flex; */
  display: inline-flex;
}

 

2. flex-direction

flex-direction 속성의 기본값은 row 이다.

• row : 가로로 정렬
• row-reverse : 가로로 오른쪽부터 정렬
• column : 세로로 정렬
• column-reverse : 세로로 밑에서부터 정렬
• initial : 기본값 row
• inherit : 부모 요소의 설정값과 같게

3. flex-wrap

flex 항목이 여러행에 나열되도록 할 수 있다. 이렇게 하면 각 행이 flex 컨테이너가 됨.

flex-wrap 속성 : 나열된 요소들의 총 넓이가 부모 넓이 보다 클 때 요소들을 다음줄에 이어서 정렬한다.

flex-wrap을 사용하지 않으면 flex-wrap : nowrap; 이 자동적용되어 요소들의 넓이가 부모넓이에 맞게 자동축소된다.

• flex-wrap : wrap : 나열된 요소들의 총 넓이가 부모 넓이 보다 클 때 요소들을 다음줄에 이어서 정렬한다.
• flex-wrap : nowrap : 정렬된 요소들의 넓이가 부모 넓이에 맞게 모두 자동 축소 된다.

 

4. flex-flow 

flex-direction과 flex-wrap을 한꺼번에 지정할 수 있는 단축 속성이다.

 

.container {
	flex-flow: row wrap;
	/* 아래의 두 줄을 줄여 쓴 것 */
	/* flex-direction: row; */
	/* flex-wrap: wrap; */
}