.container{
	display: flex
}
.container .item{
}

<div class="container">  
  <div class="item"> item01 </div>
  <div class="item"> item02 </div>
</div>

1. flex의 container에 대한 속성

• display : block | flex | inline-flex
• flex-flow:
• flex-direction:
• flex wrap
• justify-content
• align-content
• align-items

1.1 display : 아이템 배치속성

• block : 기본값, 아이템을 위에서 아래로 배치(상->하)
• flex : 좌에서 우로 배치(좌->우)
• inline-flex : 인라인 요소와 같이 정렬
• ※참고
  • div는 기본값이 block
  • block : 가로길이의 기본값이 auto, 즉 최대 너비를 갖는다.
  • inline : 가로길이를 기본값이 auto, 즉 최소 너비를 갖는다(아이템의 크기만큼만 차지한다).
    

1.2 flex-direction : 수평/수직 정렬에 대한 설정(main-axis 설정)

• row : 수평정렬 (좌 -> 우), 기본값
• row-reverse : 수평 정렬 (우->좌)
• column : 수직 정렬 (상->하)
• column-reverse : 수직 정렬 (하->상)

---

• flex-direction : row => main-axis를 row로

  

• flex-direction : column => main-axis를 column으로

  

1.3 flex-wrap : Items 묶음, 줄바꿈 단위

• nowrap : 묶음 없음.줄바꿈 없음, 기본값
• wrap : 여러줄 몪음
• wrap-reerse : wrap의 반대 반향
  

1.4 justify-content : main-axis의 정렬방법

• flex-start : Flex Item을 시작점으로 정렬, 기본값
• flex-end : Flex Item을 끝점으로 정렬
  • column-reverse와 다르게 아이템 항목은 바뀌지 않는다.
• center : Flex Item을 가운데 정렬
• 아래 두개 속성은 거의 사용하지 않음.
  • space-between : 각 Item 사이를 균등하게 정렬
  • space-aroundn : 각 Item의 외부 여백을 균등하게 정렬
    

1.5 align-content : cross-axis의 여러줄 정렬방법

• 한줄일 때는 작동하지 않는다. 2줄 이상일때만 작동
• stretch : Flex Item을 시작점으로 정렬하되 라인의 높이를 동일하게 만든다. 기본값
• flex-start : Flex Item을 시작점으로 정렬
• flex-end : Flex Item을 끝점으로 정렬
  • column-reverse와 다르게 아이템 항목은 바뀌지 않는다.
• center : Flex Item을 가운데 정렬
• 아래 두개 속성은 거의 사용하지 않음.
  • space-between : 각 Item 사이를 균등하게 정렬
  • space-aroundn : 각 Item의 외부 여백을 균등하게 정렬

---

• stretch

  

• flex-start, center, flex-end

  

1.6 align-items : cross-axis의 한줄 정렬방법

• 세로 정렬시 실제로는 align-content 보다 효율적이라 많이 사용됨.
• stretch : Item을 교차축으로 늘림
• flex-start : Flex Item을 각 라인의 시작점 정렬
• flex-end : Flex Item을 각 라인의 끝점 정렬
• center : Flex Item을 각 라인의 가운데 정렬
• 아래 속성은 거의 사용하지 않음.
  • baseline : Item을 각 라인의 문자 기준선에 정렬

---

• stretch

  

• flex-start, center, flex-end

  

2. flex의 item에 대한 속성

• order
• flex
• flex-grow
• flex-shrink
• flex-basis
• align-self

2.1 order : 아이템의 순서

• 0 : 순서없음
• number : 숫자가 작을수록 앞 순서
  

2.2 flex-grow : 아이템의 증가비율조절

• 컨테이너의 남은 부분에 대한 아이템의 증가비율을 설정
• 아이템에 flex-grow를 설정하면 컨테이너의 남은 부분을 아이템을 늘려서 채운다.

• 0 : main-axis에 대한 증가비율 없음
• number : 증가비율
  

2.3 flex-basis : 아이템의 비율 적용전(flex-grow) 기본 너비

• auto : 요소의 content 너비를 기준, 기본값
• 단위 : px, rem, em등 단위지정
• 참고 사항
  • flex-grow와 조합해서 flex-basis:0 으로 조합해서 사용하는 경우가 대부분

2.4 flex : flex-grow,flex-shirink, flex-basis:0의 축약형

• flex-grow,flex-shirink, flex-basis를 같이 쓰는것 보다 간결하교 유용함.
• 아이템 width를 flex 비율로 배치. 아래의 축약형과 동일
  • flex-grow, flex-shirink의 비율
  • flex-basis:0
• 사용예 : flex:1, flex:2