CSS display:flex 에 관한 문제 해결

1. 문제

랜딩 페이지를 만들던 도중 

한가지 문제에 부딪혔다.

 

[ 아직까지 큰 문제 없는 사진 ]

그런데

박스 크기 높이를 높이고 싶어서 height를 늘렸더니

 

정렬이 맞지 않았다.

여기까지는 정렬 적용 하지 않은것이니 당연했다.

[ html 부모 자식 구조 알아보기 ]

 

가장 상단에 멤버 display를 flex로하면 

기본값이 row이니까

 

내용물이 횡으로 정렬되고

 

flex기본값 축(횡 방향)과

같은 축을 조정하는 justify-content에

 

space-between을 주어 최대 간격으로 정렬하고

 

align-items 종 축이 될테니 center를 주어 이걸로 맞추려고 했다.

그런데..

 

결과가 이렇게 나왔다.

이걸 원한게 아니었다.

2. 원인 예상

일단 프로그램은 틀리지 않기때문에

내가 뭔가 잘못한게 있을거라고 생각하고

 

div의 부모 자식 관계 문제일거라고 예상했다.

 

그리고

 

몇가지 테스트를 해봤다.

3. 시도

1. 지금 적용되고 있는 부위

리스트 자체적으로 right에 값을 주어 움직임을 보았다.

 

그대로였다.

 

2. row축(횡축)자체에서는 적용되고 있는것은 맞는가?

 

리스트 자체 말고 다시 아까 봤던 부모 쪽에 justify-content (row기준 횡축)

에 right을 주었다

오른쪽에 나와야할것이다.

오 예상한대로 오른쪽에 나왔다.

 

이것을 통해 알 수 있는 것

4 .해결

1.row축으로 조정 가능한 것으로 보아

부모와 자식 관계는 맞으나

그 내용물이 상당히 쏠려 다니는것을 보니

직접적인 부모 관계가 아님을 느꼈다.

 

그렇다!

부모 밑에 li (리스트)4개가 아니라

 

부모 밑에 ul (unordered list)밑에 li 리스트 4개였다.

 

[ 처음 모습 ]

가운데 정렬 되진 않았지만 크기가 작아서 별 문제없는 모습

 

[ 박스 크기가 늘어나니 정렬 안된것이 드러난 모습 ]

 

[space-between은 자식 div들을 최대간격 2개 있으면 양 끝으로 보내고 하나만 있으면 왼쪽 끝으로 보내기에 보내진 모습]

[종축 right 즉, 오른쪽 정렬하니 그대로 오른쪽 으로 쏠린 모습]

 

[column 형태로 세로 정렬을 하면 몇개가 와도 위에서 아래로 내리니까 양 옆으로 수축하지 않는다.]

[column 형태 + justify-content(종축으로 바뀜) : center 적용한 모습]

 

 

5. 느낀점

부모 div와 자식 div간에 관계에 따른 코드 적용을 보다 더 체감 할 수 있었다.