Flex

Flex란?
지금까지 설명한 float,position은 레이아웃을 만들기 위한 속성이 아니다. 그래서 레이아웃을 잡는 것이 다소 까다로웠는데 이것을 해소시켜주는 것이 바로 flex이다. 어떤 요소들을 수평정렬 해준다고 생각해보자.
float를 사용한다면 {float:left;}를 하고 부모요소에 clearfix를 추가로 작성해줘야 한다. 그러나 flex 속성을 사용한다면 정렬하려는 아이템의 부모요소에 {display:flex;}만 추가해주면 된다.
1. Container & Items
  flex에서 중요한 개념은 Container와 items이다. 정렬하고싶은 요소들을 items, 그 요소들의 부모 요소를 container라고 하고 container와 items에 적용해야할 속성이 나뉜다.
Flex Container
먼저 container가 가질 수 있는 속성을 살펴보자.
1)display : -flex
```
        -inline-flex  
```
여기서 flex와 inline-flex의 차이는, flex는 container 안의 items들을 수평정렬하고 감싸는 container들의 배치는 수직정렬한다.
그러나 inline-flex는 container들의 배치와 items들의 배치를 모두 수평정렬한다.

2)flex-flow(단축속성): -flex-direction: row(기본값), row-reverse, column, column-reverse
```
                 -flex-wrap: nowrap(기본값), wrap, wrap-reverse  
```
nowrap은 한줄에 다 들어가게, wrap은 줄바꿈 가능하게, wrap-reverse는 줄바꿈 가능한데 줄 순서를 거꾸로 하는 것이다.

  Flex-flow는 flex의 배열축과 줄바꿈을 설정할 수 있는 단축속성이다. flex-flow값을 기재하지 않아도 자동으로 ```{flex-flow: row nowrap;}```이 설정될텐데 row, nowrap으로 설정한다 하더라도 flex-flow 속성을 잊지않도록 항상 기재해주는 습관을 들이는것이 좋다.  
  또, flex-direction은 수직정렬 해야하는 경우에도 column보다 row가 더 활용도가 높기때문에 row를 사용해서 다른 요인을 바꿔서 수직정렬 해주는 것이 좋다.  


  3)justify-content :( 주축방향으로 )아이템을 정렬하는 방법이다. "주축방향"이므로 row일때는 가로방향, column일때는 세로 방향임을 잊지말자. 각각의 속성값들은 그림으로 살펴보도록 하자.  
  ![image](https://user-images.githubusercontent.com/61978339/87616702-ab17db80-c750-11ea-80a5-09af53e0e22e.png)  

  간단하게 부연설명을 하자면,  
  -flex-start : 주축방향의 시작면을 의미한다.(row면 왼쪽, column이면 위쪽)(기본값)  
  -flex-end: 주축방향의 끝나는 면  
  -center: 말그대로 중앙배열을 의미한다  
  -space-between: 양끝에 요소를 붙이고 나머지 공백을 일정하게 나눠갖는 배열이다.  
  -space-around: 요소들이 각각 양옆으로 일정한 공백을 갖는다. 양끝에는 절반의 공백을 갖게된다.(그림참고)  
  -space-evenly : 그림에는 나와있지 않지만 요소 양끝, 사이 전부 동등한 공백을 갖는 방법이다.  


   4)align-content :( 교차축 방향으로 )아이템을 정렬하는 방법이다. "교차축방향"이므로 row일때는 세로방향, column일때는 가로방향임을 잊지말자. 주의할 점은 align-content는 flex-wrap을 통해 여러줄이고 여백이 있을 때만 사용할 수 있다. 각각의 속성값들은 그림으로 살펴보자  

<img width="686" alt="align-content" src="https://user-images.githubusercontent.com/61978339/87617846-49a53c00-c753-11ea-89ef-d7338ba69b63.png">  
  간단하게 부연설명을 하자면,  
  -stretch : 아이템들을 container의 크기에 맞게 늘려서 배열한다.(기본값)  
  -flex-start : 교차축 방향의 시작면을 의미한다.(row면 위쪽, column이면 왼쪽)  
  -flex-end : 교차축 방향의 끝나는 면을 의미한다.  
  -center: 말그대로 중앙배열을 의미한다.  
  -space-between: 양끝에 요소를 붙이고 나머지 공백을 일정하게 나눠갖는 배열이다.  
  -space-around: 요소들이 각각 양옆으로 일정한 공백을 갖는다. 양끝에는 절반의 공백을 갖게된다.  
  -space-evenly : 그림에는 나와있지 않지만 요소 양끝, 사이 전부 동등한 공백을 갖는 방법이다.  


  5)align-items :( 교차축 방향으로 )아이템을 정렬하는 방법이다. "교차축방향"이므로 row일때는 세로방향, column일때는 가로방향임을 잊지말자. 주의할 점은 flex-wrap으로 통해 아이템들이 여러줄이라면 align-content 속성이 더 우선된다. 아이템이 여러줄일때 align-items를 사용한다면 align-content는 strech로 정해두고 사용해야 한다. 각각의 속성값들은 그림으로 살펴보자   
 ![image](https://user-images.githubusercontent.com/61978339/87617161-c7684800-c751-11ea-80d2-8e800fdd490f.png)  

  간단하게 부연설명을 하자면,  
  -stretch : 아이템들을 container의 크기에 맞게 늘려서 배열한다.(기본값)  
  -flex-start : 교차축 방향의 시작면을 의미한다.(row면 위쪽, column이면 왼쪽)  
  -flex-end : 교차축 방향의 끝나는 면을 의미한다.  
  -center: 말그대로 중앙배열을 의미한다.  
  -space-between: 양끝에 요소를 붙이고 나머지 공백을 일정하게 나눠갖는 배열이다.  
  -space-around: 요소들이 각각 양옆으로 일정한 공백을 갖는다. 양끝에는 절반의 공백을 갖게된다.  
  -space-evenly : 그림에는 나와있지 않지만 요소 양끝, 사이 전부 동등한 공백을 갖는 방법이다.