지난 TIL에서 Block Level Element와 Inline Level Element, 그리고 이 둘을 합한 Inline-Block Element에 대해 알아보았다.
결점이 많은 Inline-Block을 사용하기엔 아무래도 무리가 있기에, CSS에서 컨텐츠를 조정 할때는 display속성에 Flex속성을 부여한다.
그렇다면 Flex속성, Flex box란 무엇일까?
이름 그대로 Block과도 Inline과도 다른 유연한 요소라고 할 수 있다.
이 Flex box에는 3가지의 규칙이 있는데,
첫번째 규칙은, 부모 요소에 flex를 명시해야 한다는것이다.
이것을 예제 코드로 작성하면,
<body>
<div></div>
<div></div>
<div></div>
</body>HTML문서가 이러한 방식으로 작성 되었을때, <div>에 flex속성을 부여해도 아무런 변화가 없다.
<div>를 flex box로 만들고 싶다면,
body {
display: flex;
}와 같이 <div>의 상위, 즉 부모인 <body>에 flex속성을 부여해야 <div>요소를 제어하는것이 가능하다. 이 flex속성이 적용 되면, 축에 따라서 요소들을 제어하는것이 가능한데,
그 축이 바로 아래의 사진이다.
이 사진에 나와있듯이, flex box는 기본적으로 main axis와
cross axis 두개의 축으로 움직이는데, 이것이 두번째와 세번째 규칙이다.
여기서 main axis를 기준으로 움직이게 만드는 명령어가
justiyfy-content, cross axis로 움직이게 만드는 명령어가
align-items이다.
기본적으로 flex는 main axis를 따라 움직이기에, align-itmes는 justify-content에 비해 옵션이 적다.
그렇다면 가로로 배치 되는 컨텐츠를 세로로 움직이게 만들려면 어떤 방법이 가장 좋을까?
가장 빠른 방법은 아마도 축을 움직이는 방법일것이다.
flex에도 main axis를 움직이는 방법이 있다.
그것은 바로 flex-direction이다.
flex-direction은 main axis의 방향을 결정하는 요소인데,
디폴트가 row 즉 가로로 설정 되어 있다.
이를 column 즉 세로로 설정하면 가로로 나열 되어있던 요소는 세로로 배열 되게 된다.
이러한 방법을 통해서 inline,block,inline-block으로 배치하기 힘든 레이아웃을 배치 해 나갈 수 있다.
