[CSS] flex를 이용한 요소 중앙정렬하기

 로그인 화면을 보면 전체 웹사이트 중앙에 위치해 있다. 이를 구현하기 위해 필요한 옵션들은 다음과 같다.

 

1. display: flex

2. justify-center: center

3. align-item: center

 

 

flex 는 flexible box 를 의미합니다. flex 는 안의 요소의 크기가 불분명하거나 동적인 경우에도, 사용자가 편하게 각 요소들을 정렬할 수 있는 효율적인 방법을 제공한다

 

flex 는 container 와 item 이라는 두 가지 개념으로 나누어진다

container 는 item 들을 둘러싸고 있는 부모 요소입니다. 따라서 각 item 들을 정렬하기 위해서 container 가 필요하다..

 

또한 container 에서만 적용되는 속성이 있고 item 에서만 적용되는 속성이 있다.

 

	Container	Items
	- display - flex-flow: ( flex-direction / flex-wrap ) - justify-content - align-content - align-items	- order - flex: ( flex-grow / flex-shrink / flex-basis ) - align-self

---

display: flex  |  display: line-flex

 

display: flex 를 적용한 container 는 block 요소 처럼 한 줄 전체를 사용한다. 만약 display: flex 를 적용한 flex container 가 두개 이면 2줄을 사용하게 되는 것입니다. 결과적으로  flex container가 수직으로 쌓인다는 것.

 

display: line-flex 를 적용한 container 는 inline 요소 처럼 한 줄에 여러 inline-flex container 가 배치 될 수 있다. 만약 display: inline-flex를 적용한 inline-flex container 가 3개 존재한다면 1줄에 최대 3개의 flex container 가 사용될 수 있다. 결과적으로 flex container 가 수평으로 쌓인다는 것.

 

출처: heropy.blog

---

justify-content

 

 

1. display: flex

2. justify-center: center

3. align-item: center

 

 

 

justify-content 란 main-axis 기준으로 정렬방법을 설정하는 속성이다.

main-axis 는 사용자가 flex-direction 속성을 통해 정할 수 있다. flex-direction 속성의 default 값은 row 이다.

flex-direction: row	flex-direction: column
main-axis 를 가로축 / cross-axis 를 세로축으로 설정	main-axis 를 세로축 / cross-axis 를 가로축으로 설정.

 

만약 flex-direction: row 를 사용하거나 따로 지정하지 않고 기본값을 쓴다면, justify-content 는 가로축을 기준으로 수평정렬 방법을 설정할 수 있게 된다.

 

justify-content 는 다음과 같은 속성을 부여할 수 있다.

출처: heropy.blog

 

---

 

align-items

 

 

1. display: flex

2. justify-center: center

3. align-item: center

 

 

align-items 란 cross-axis 기준으로 정렬방법을 설정하는 속성이다.

flex-direction: row	flex-direction: column
main-axis 를 가로축 / cross-axis 를 세로축으로 설정	main-axis 를 세로축 / cross-axis 를 가로축으로 설정.

 

만약 flex-direction: row 를 사용하거나 따로 지정하지 않고 기본값을 쓴다면, align-items 는 가로축을 기준으로 수직정렬 방법을 설정할 수 있게 된다.

 

align-items 은 items 들이 한줄에 모두 들어가는 경우에 주로 사용하며

align-content 는 items 들이 두 줄 이상에 들어가는 경우에 사용한다.

밑에 예시는 2줄임에도 불구하고 align-items 을 사용한 경우다. 하지만 두 줄 이상에도 적용된다.

 

align-items 는 다음과 같은 속성을 부여할 수 있다.

 

출처: heropy.blog

 

 

 

 

---

https://heropy.blog/2018/11/24/css-flexible-box/

포스팅 내용의 출처입니다. 정말 쉽게 잘 설명해주셔서 참고하였습니다.

flex 속성에 대한 다양하고 자세한 설명이 필요하신분은 꼭 참고하셨으면 좋겠습니다.

CSS Flex(Flexible Box) 완벽 가이드