Flex

시작하며...

 Flex는 레이아웃에 배치를 하며, 가장 많이 사용하는 방식인것 같습니다. Flex는 레이아웃 전용 배치 기능입니다. 

Flex는 표준스펙을 지원하지만, Grid는 legacy 버전만 지원하기 때문에 둘다 알아두면 좋지만, 일단 Flex를 가장 많이 사용하고 있습니다.

 

HTML의 기본구조는 다음과 같습니다.

<div class='container'>
  <div class='itemA'></div>
  <div class='itemB'></div>
  <div class='itemC'></div>
<div>

Parent 요소는 container를 `Flex container`라 부르고, Childeren 요소는 `Flex Item` 이라고 부릅니다.

`컨테이너가 Flex의 영향을 받는 전체 공간이고, 설정된 속성에 따라 각각의 아이템들이 떤 형태로 배치되는 것`이라고 생각하시면 됩니다. 

 

Flex의 속성들은,

• Container에 적용하는 속성
• Item에 적용하는 속성

 Container에 적용하는 속성 

 display: flex;

 Flex 아이템들은 가로 방향 배치되고, 자신이 가진 내용물의 width 만큼만 차지하게 됩니다. inline 요소들 처럼 됩니다. hight는 컨테이너의 높이 만큼 늘어납니다. Container 만큼 hight가 자동으로 늘어나게 됩니다. 

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

 

inline-flex 인 경우, block과 inline-block의 관계를 생각하면 됩니다. Item의 배치가 아닌, Container의 주변 요소들과의 배치를 결정에 영향을 주게 됩니다.

 

아이템들의 수평 축(= Main Axis), 수직 축 (=cross Axis)을 기준으로 정령이 되게 됩니다.

 

 flex-direction

 아이템들이 배치되는 축의 방향을 결정하는 속성입니다.  

.container {
  flex-direction : row; /* 가로 정렬*/
  /* flex-direction : column;  수직정렬*/
  /* flex-direction : row-reverse; 역순 가로정렬*/
  /* flex-direction : column-revers; 역순 세로정렬*/
 }

 

 flex-wrap

 컨테이너가 더 이상 아이템들을 한줄에 담을 여유 공간이 없을때, 아이템의 줄바꿈 처리하는 속성입니다.

.container {
 flex-wrap : nowrap; /* A,B,C 아이템을 줄을 세우다가 Container상에서 C는 줄바뀜이 안되고, 삐져나감*/
 /* flex-wrap : wrap; // A,B,C 아이템을 줄을 세우다가 Container상에서 C가 아래로 줄바뀜*/
 /* flex-wrap : wrap-revers; // A,B,C 아이템을 줄을 세우다가 Container상에서 C가 위로 줄바뀜*/
}

 

 flex-flow

flex-direction과 flex-wrap을 한꺼번에 지정하는 단축 속성

.container {
 flex-flow : row wrap; /* direction , wrap */
}

 

 justify-content 

 메인축 방향을 결정하는 속성

/*메인축을 정렬합니다.*/
.container {
	justify-content: flex-start; /* 시작점으로 정렬 row면 왼쪽, column 맨 위*/
	/* justify-content: flex-end;  끝점으로 정렬 row면 오른쪽, column 맨 아래*/
	/* justify-content: center; 중간에서 정렬*/
	/* justify-content: space-between; 각 아이템 사이 간격*/
	/* justify-content: space-around; 각 둘레 간격*/
	/* justify-content: space-evenly; 각 양끝과 사이의 간격을 균일하게 */
}

align-item

.container {
 align-item : stretch;
 /* align-item : flex-start;  시작점으로 정렬  row는 위,  column은 왼쪽*/
 /* align-item : flex-end;  시작점으로 정렬  row는 위, column은 왼쪽*/
 /* align-item : center; 가운데 정렬*/
 /* align-item : baseline; 텍스트 베이스 기준*/
}

alitn-content

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

.container {
	flex-wrap: wrap;
	align-content: stretch;
	/* align-content: flex-start; */
	/* align-content: flex-end; */
	/* align-content: center; */
	/* align-content: space-between; */
	/* align-content: space-around; */
	/* align-content: space-evenly; */
}

많이 사용하면서, 개념적으로 정리해두게 되었습니다.

다음은 Item에 대해서 정리해보도록 하겠습니다