<div class="container">
	<div class="item">helloflex</div>
	<div class="item">abc</div>
	<div class="item">helloflex</div>
</div>

부모 요소인 div.container → Flex Container(플렉스 컨테이너)

자식 요소인 div.item → Flex Item(플렉스 아이템)

컨테이너에 적용하는 속성

1. 배치

• display: flex;

  • Flex 아이템들은 가로 방향으로 배치
  • width : 자신이 가진 내용물의 만큼
  • height : 컨테이너의 높이만큼 늘어남 (item의 높이가 모두 동일해짐)

  

  flex

  

  block

• display: inline-flex;

  : 컨테이너가 주변 요소들과 어떻게 어우러질지 결정하는 값

  

• 메인축 & 교차축

  • 메인축(Main Axis) : 아이템들이 배치된 방향 축

  • 교차축(Cross Axis) : 메인축과 수직인 축

    

• flex-direction

  : 아이템들이 배치되는 축의 방향 결정

  .container {
  	flex-direction: row;                   아이템이 행(가로) 방향으로 배치
  	/* flex-direction: column; */                 열(세로) 방향으로 배치
  	/* flex-direction: row-reverse; */            역순으로 가로 배치 
  	/* flex-direction: column-reverse; */         역순으로 세로 배치
  }
  

  

• flex-wrap

  : 줄넘김 처리 설정

  .container {
  	flex-wrap: nowrap; 
  	/* flex-wrap: wrap; */
  	/* flex-wrap: wrap-reverse; */
  }
  

  

• flex-flow

  : flex-direction과 flex-wrap을 한 번에 지정

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

2. 정렬

justify : ****메인축(오뎅꼬치) 방향으로 정렬

align : 수직축(오뎅을 뜯어내는) 방향으로 정렬

• 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; */    아이템들의 사이와 양끝에 균일한 간격
  }
  

  

• align-items

  : 수직축 방향 정렬

  .container {
  	align-items: stretch;                 아이템들이 수직축 방향 끝까지 늘어남
  	/* align-items: flex-start; */                시작점으로 정렬
  	/* align-items: flex-end; */                  끝으로 정렬
  	/* align-items: center; */                    가운데로 정렬
  	/* align-items: baseline; */                  텍스트 베이스라인 기준으로 정렬
  }