css display flex 사용 가로 또는 세로 정렬하기

`display: flex`는 웹페이지의 레이아웃을 만들 때
자식 요소들을 수평 또는 수직 방향으로 위치를 지정할 때 사용된다.
`display: flex`가 지정된 html 요소는 `flex-direction, justify-content, align-items`을 사용하여 내부의 다른 html 요소들을 쉽게 배치할 수 있다.
각각 배치 방향(flex-direction), 가로 정렬(justify-content), 세로 정렬(align-items)을 뜻한다.
단순히 방향과 정렬만 지정해 주면 요소들을 쉽게 배치할 수 있기 때문에,
자주 사용된다.
또한, 위에서 언급한 4가지는 같이 사용되기 때문에 기록해 두자.

Using CSS Display FLEX Property
CSS `display: flex` 사용하기

화면에 구성 요소를 배치하는 레이아웃 작업은 번거롭다.
때문에 css의 `display: flex`를 사용하면 
html5 요소들을 가로 또는 세로 정렬하여 편하게 구성할 수 있다.
단순히 container로 사용할 div 요소에 설정하면,
자식 html5 요소들을 가로 또는 세로로 배치할 수 있다.
특히, 반응형 웹을 위해 레이아웃을 구성할 때 `display: flex`는 괜찮은 방법 중 하나이다.

함께하는 요소 4가지

`display: flex`를 사용하여 레이아웃 또는 자식 html 요소들을 배치할 때 
거의 함께하는 요소들이 있다.
4가지 정도이며, 의미 정도는 알아두자.

• display: flex
• flex-direction
• 자식 요소들을 배치하는 주축 방향 설정
• justify-content
• 주축 방향 정렬 방법
• align-items
• 교차축 방향 정렬 방
• flex-wrap
• 줄바꿈 여부

주축과 교차축

`display: flex`를 사용할 때 중요한 개념이 주축과 교차축이다.
주축과 교차축은 `flex-direction`에 지정된 값으로 결정된다.
주축은 main axis, 교차축은 cross axis 이다.
`flex-direction`로 지정된 방향이 주축( main axis )이고,
엇갈린 축이 교차축( cross axis)이다.
`display: flex`로 설정된 부모 요소의 자식요소들을
가로로 배치하려면 `flex-direction: row`로 지정하면
주축은 가로, 교차축은 세로가 된다.
반대로,
`display: flex`로 설정된 부모 요소의 자식요소들을
세로로 배치하려면 `flex-direction: column`로 지정하면
주축은 세로, 교차축은 가로가 된다.

주축: 가로, 교차축: 세로

display: flex;
flex-direction: row;

주축: 세로, 교차축: 가로

display: flex;
flex-direction: column;

아래의 이미지와 비교해 보자.
부모 div 태그에 `display: flex`을 지정했다.
그리고, `flex-direction`을 `row 또는 column` 중 하나로 지정한 것에 따라 `주축과 교차축`이 변경된다.
즉, `flex-direction`으로 지정된 방향이 `주축`, 교차되는 방향이 `교차축`이 된다.

flex-direction: row
주축: 가로, 교차축: 세로,
flex-direction: column
주축: 세로, 교차축: 가로

상세한 옵션들

`display: flex`의 기본 개념을 살펴봤다.
`flex-direction`에 설정된 설정값이 row 또는 column에 따라 주축과 교차축이 결정된다.
쉽게 풀이하면,
`flex-direction: row`인 경우 주축은 가로, 가로축은 세로가 된다.
`flex-direction: column`인 경우 주축은 세로, 가로축은 가로가 된다.
이제 옵션에 `display: flex`의 옵션들에 대해 간단히 살펴본다.

• display: flex
• 세로 또는 가로로 자식 요소들을 배치한다.
• flex-direction
• 설정값이 주축(main axis)
• row
• 주축: 가로 ( 좌->우 )
• 교차축: 세로 ( 위->아래 )
• column
• 주축: 세로 ( 위->아래 )
• 교차축: 가로 ( 좌->우 )
• row-reverse
• 주축: 가로( 우->좌 )
• 교차축: 세로( 위->아래 )
• column-reverse
• 주축: 세로 ( 아래->위 )
• 교차축: 가로 ( 좌->우 )
• justify-content
• 주축을 기준으로 자식 요소들을 정렬한다.
• flex-start
• 자식 요소들을 시작 지점에 정렬한다.
• flex-end
• 자식 요소들을 끝 지점에 정렬한다.
• center
• 자식 요소들을 가운데 지점에 정렬한다.
• space-between
• 자식 요소들에 동일한 간격을 설정하고 양 끝에 여백을 제거한다.
• space-around
• 자식 요소들에 동일한 간격을 설정하고 양 끝에 여백을 설정한다.
• space-evenly
• 자식 요소들에 모든 간격을 동일하게 설정한다.
• align-items
• stretch
• flex-start
• flex-end
• center
• baseline
• flex-wrap
• nowrap
• wrap
• wrap-reverse

.