div 박스 가로로 배치하는 간편한 방법 display: flex; [솔직히 float:left; 나 display: inline-block; 보다 좋음]

3개의 div 박스를 만들어줍니다

flex를 적용시킬거니까 3개를 묶는 div태그 class="flex-container"

3개 박스는 class="box"로 했습니다.

근데 div 박스가 확인이 안되니 색과 높이,너비를 넣어보겠습니다.

 

이제 잘 보입니다!

​

이제 flexbox를 써 볼까요?

​

그냥 박스들을 감싸는 부모 요소(class="flex-container") 에게 display : flex를 사용하면 됩니다.

 

결과는?

가로로 잘 정리되었습니다.

---

flex로 가로정렬한 div box 정렬 위치를 바꾸고싶다면? 어떻게 해야 할까요?

justify-content : center; //가운데 정렬
justify-content :flex-end; //오른쪽 정렬
justify-content:flex-start; //왼쪽 시작점 정렬
justify-content:space-around; //균일한 간격을 만들어줌
justify-content:space-between; //사이(between)에 균일한 간격을 만들어줌

---

그렇다면 세로로 정렬할 때는 어떻게 할까요??

이대로 align-content : center; //가운데 정렬 을 입력했지만 아무런 반응도 나타나지 않았습니다.

알아보니 align-content는 박스가 가로로 여러줄일 때 박스들의 상하배치를 조절할 수 있는 속성입니다.

​

그래서! div박스를 여러개 만들어보았지만!!

계속 가로로만 정렬될 뿐 다음줄로 넘어가지 않네요

display:flex; 를 지워봤는데 그냥 세로로 채워질 뿐 다음줄로 넘어가지 않았습니다.

그래서 알아봤습니다.

flex-wrap 을 넣어야 다음줄로 채워진다고 하네요

 

다음줄로 채워졌지만?

세로 중앙정렬은 되지 않고 있어요ㅜㅜ

​

전체 틀을 묶는 div의 크기가 딱 맞게 되어있어서 그런가? 하고 flex-container 클라스의 background속성을 연두색으로 했습니다.

​

아 맞네요

 

그래서!

위인지 아래인지 중간인지 알아내기 위해서는 공간이 있어야 구분이 되니까 height를 넉넉히 넣어주겠습니다.

 

 

또 안됩니다.

 

한참 찾아보다가 height크기에 단위를 안 적어넣었다는 것을 알았습니다.

이제 잘 먹히네요 휴

align-content : center; //가운데 정렬
align-content :flex-end; //아래쪽 정렬
align-content : flex-start//위쪽 시작점 정렬
align-content : space-around //세로로 균일한 간격을 만들어줌
align-content:space-between; //사이(between)에 균일한 간격을 만들어줌

---

이상으로 display:flex기능을 이용하여 가로정렬하는 방법에 대해 알아봤습니다!!

 

보시는 분들께 도움이 되었으면 좋겠습니다!

저는 이만!