[CSS] flex를 이용한 가운데 정렬

flex를 이용해

가운데 정렬을 해보겠습니다.

 

---

1. flex

display:flex

div{ display:flex; }

①  display:flex;

먼저 flex를 이용한다는 의미는

display에 flex를 적용한다는 의미입니다.

 

아마 여러분이 중앙 정렬을 하고 싶은 곳에

위와 같이 display:flex;를 적어도

아무 일도 일어나지 않을 겁니다.

 

위의 이미지처럼요.

 

flex는 옵션 값을 설정해주어야

가로, 세로 모두 중앙 정렬을 해줄 수 있습니다.

 

아래에서 같이 옵션 값을 정해봅시다.

 

 

 

320x100

 

---

---

2. 옵션

flex 옵션

div{ flex-direction: column; }

①  flex-direction

direction은 방향이라는 뜻으로

flex-direction옵션은

가로 방향으로 정렬할지 세로 방향으로 정렬할지를 정해줍니다.

 

옵션 값으로 column을 넣으면 세로 방향으로 정렬됩니다.

가로 방향은 row를 입력해주시면 됩니다.

 

가로방향 설명

 

li{ justify-content: center; }

②  justify-content: center

안쪽에 있는 컨텐츠의 세로 정렬을 관리해주는 옵션입니다.

제가 위에서 이미 적용된 상태로 코드를 넣었었는데요.

 

justify-content 옵션을 적용하지 않으면 이렇게 안쪽 글이 위쪽으로 붙어서 나옵니다.

세로로 가운데 정렬이 되지 않은 모습입니다.

 

line-height로도 많이 세로 정렬을 했었는데요.

1줄일 때는 문제가 없지만 여러 줄일 때는 정렬하기 곤란했었죠.

그럴 때 flex를 이용해 정렬해주면 좋습니다.

 

③ align-items:center

안쪽의 아이템 가로 방향 정렬 옵션입니다.

여기에 값을 center로 적으면 가로 방향으로

가운데 정렬을 할 수 있습니다.

 

-

 

 

 

 

 

 

 

 

 

---

3. 예제

codepen 예제

 

①  flex 가운데 정렬 예제

코드펜 예제를 첨부하니

외우지 마시고 복사해서 사용하세요.

 

ul{
  /* li 가운데 정렬 */
  display:flex; /* display flex로 설정 */
  flex-direction: column; /* 위에서 아래로 정렬 (열) */
  justify-content: center; /*세로방향 가운데 정렬*/
  align-items: center; /*가로방향 가운데 정렬*/
}

②  flex 코드

다른 꾸미는 코드 없이 보고 싶으신 분들을 위해

flex 코드만 따로 남깁니다.

 

이 코드를 복사해 원하는 곳에 붙여넣으시면 됩니다.

 

https://ssimplay.github.io/

references

③ 레퍼런스 사이트

블로그에서 설명했던 작은 기능들을 모아서 한 번에 볼 수 있게 만들고 있습니다.

필요한 기능을 위 사이트에서 간편하게 복사해서 사용하세요.

제가 쓴 코드라서 그냥 사용하셔도 됩니다.

 

지금은 몇 개 없지만

천천히 추가해두겠습니다.

 

라이센스는 언젠가 저를 우연히 만나면 밥을 사주면 되는 라이센스로

(사실상 무료 라이센스)

편하게 사용하세요~

 

(비어 라이센스 재밌어서 따라 해 봤습니다.)

 

 

 

---

이상으로 flex를 이용한 가운데 정렬이었습니다.

도움이 되셨다면 공감과 댓글, 구독을 부탁드립니다.

 

 

[같이 보면 좋은 포스팅]

[coding/개발 팁] - [Github] 깃허브 클론 하는 법 - 연동하기

[Github] 깃허브 클론 하는 법 - 연동하기

[coding/html + css] - CSS box-shadow 그림자로 음각 효과 내기

CSS box-shadow 그림자로 음각 효과 내기

 

그럼 이만.

총총.