웹페이지 제작 전 안하면 서운한 CSS 작업 그중 여러개의 div태그들을 쉽게 정렬 할 수 있는 flex를 알아보자
설명전 TMI로 글쓴이가 이해한 방법으로 설명하는것이라 확실한진 않다 하지만 내가 생각하는 코드란 어떤 방식으로든 동작 방법을 이해한다면 사용할 수 있다고 생각하고 사용하다 보면 익숙해지고 깨닫기 때문에 먼저 자기 방식대로 코드를 이해하고 그후에 확실히 이해하는 방법도 좋다고 생각한다.
Flexbox 모델
내가 이해한 flex는 부모태크안에 있는 태그들의 정렬을 쉽게 해주는 것이다.
예를들어 다음과 같은 코드가 있다고 가정하자
ex)
위의 코드와 같이 class parents 를 가지고 있는 div 태그가 부모가 되고 class child 를 가지고 있는 div 태그가 자식태그가 된다.
이때 parents에 display: flex; 속성을 주어 자식태그들을 정렬시킬 수 있다.
졍렬하는 방법으로는 보통 부모태크에 다음과 같은 속성들을 추가해 자식 태그를 모두 가운데로 이동시킨다.
예시중 flex-direction: 은 자식태그들을 세로 또는 가로로 정렬시키기 위해 사용한다.
justify-content: 는 세로 또는 가로로 정렬된 자식태그 들을 x축 y축으로 거리를 벌리거나 좁힐 수 있다 여기서 x축과 y의 기준은 flex-direction: 의 속성중 row; column; 에서 무었을 주었는지에 따라 다르다 row는 태그들을 가로로 정렬시키는데 여기서 x축은 가로가 되고 y축은 세로가 된다 column은 그 반대가 된다.
flex-direction: 으로 row를 준 자식 태그들은 x축 방향으로 서로의 거리를 조절해 정렬 할 수 있고 column은 자식태그들을 세로로 정렬되기 때문에 y축 방향으로 서로의 거리를 조절해 정렬 할 수 있다.
align-items:는 justify-content: 와 다르게 y축 방향으로 자식태그들을 정령한다.
위와같은 개념을 이해하고 align-items: 과 justify-content: 의 속성들을 쓴다면 이해가 빠를것이다.
