[CSS] flex 이해하기

CSS로 요소들의 위치를 잡을 때 flex를 많이 사용한다는 것을 느꼈습니다. 사실 CSS3 이전에는 flex가 없어서 원하는 대로 위치를 지정하는 것이 어려웠다고 한다. flex를 사용하면서 화면의 크기가 달라져도 자동적으로 재 정렬되어 보입니다. 그렇다면 flex를 어떻게 사용하는지 살펴보겠습니다.

---

flex는 아래와 같이 사용할 수 있습니다.

div{
	display:flex;
}

 

section 태그 안에 div로 box 3개를 출력해보겠습니다. 다음 그림과 같이 기본적으로 block 타입이기 때문에 한 줄에 하나의 box가 출력됩니다. 

 

 

이제 section 태그의 display를 flex로 변경해보겠습니다. 한 줄에 box 3개가 모두 출력되었습니다. 이러한 결과가 나타난 이유를 자세히 살펴보겠습니다.

 

---

위에서 봤던 것처럼 section 태그가 flex container가 되고 각 box가 flex item이 되겠습니다. display를 flex로 설정하면 main axis를 기준으로 요소들이 배치됩니다. flex는 기본적으로 가로가 main axis이기 때문에 위에서 box1, box2, box3가 가로로 정렬하여 배치된 것을 확인할 수 있습니다.

※출처 : https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Flexbox

위 그림에서 main axis, cross axis에 따라 다양하게 flex item들을 배치할 수 있습니다. 이 부분은 다른 글에서 자세하게 알아보겠습니다. 여기서는 main axis를 바꾸는 방법만 확인해보겠습니다. flex로 설정 후 flex-direction을 column으로 설정한다면 flex item들은 아래 그림과 같이 세로를 기준으로 배치될 것입니다.

 

---

사실 flex 이전에는 어떻게 요소들을 배치했는지 해보지않아서 flex가 얼마나 편리한지 체감할 수는 없지만 <header> 안에 각 요소들을 똑같은 거리로 배치하려면 매우 복잡할 것 같다는 생각이 듭니다. 다음 글에서는 flex를 활용하여 요소들을 어떻게 배치할 수 있는지 살펴보겠습니다.

kimmeh1.tistory.com/24

[CSS] flex box를 위한 속성들

 

 

※ 공부를 시작한지 얼마 되지 않아 정보가 정확하지 않을 수 있습니다. 오류가 있으면 답글로 알려주시면 감사하겠습니다.