3.10 Flexbox Part One
inline-block의 문제점이 발견되자, 박스의 위치를 바꾸는 쉬운 방법을 찾기 위해 flexbox라는 방법을 고안해냄.
flexbox는 박스를 어디에나 둘 수 있어서 좋다. 그리고 flexable 하다. 2차원 레이아웃에서 아주 잘 작동한다. flexbox를 사용하는 것은 매우 쉬운데, 지켜야할 규칙들이 정말 정말 중요하다.
규칙1. 자식 element는 어떤 것도 적지 말아야 한다. 부모 element에만 명시해야 한다.(div의)부모를 display: flex;로 만든다
이 경우, <div>에 작성하지 않고, <body>에 작성하면 된다. <body>가 <div> 3개의 부모 element다. 그래서 박스들을 우리가 원하는 아무 곳에 움직이게 하려면 부모 element를 flex contatiner로 만들어야 한다.
⬆️ display: flex;
⬆️ 이 element들은 여전히 block이다. margin도 있고, padding도 있고 나란히 배열되어 있다. <body>가 자식들을 제어하는 것이다.
그러고 나면 이제 많은 속성들을 수정할 수 있다.
예를 들어, justify-content: center/flex-end/flex-start/space-evenly/space-around/space-between/...; justify-content는 수평으로만 작용하는 것은 아니다.
규칙2. 주축(main axis)과 교차축(cross axis)
주축은 수평이고, 교차축은 수직이다.
justify-content는 주축에 적용된다.
aline-items라고 불리는 다른 프로퍼티는 교차축에 적용된다. 기본적으로 교차축은 수직이다. (기본적이라고 하는 것은 나중에 이 속성을 바꿀 수 있기 때문이다.)
justify-content는 주축 위에서 움직이고,
aline-items는 교차축 위에서 움직인다.
주축은 수평으로 디폴트가 설정되어 있고,
교차축은 수직으로 설정되어 있다.
align-items 설정해도 적용되지 않는다. body와 div 높이가 같아서. 그렇기 때문에 height를 바꿔야한다.
vh: viewport height. viewport를 screen이라는 말로 생각해도 된다. 100vh는 화면 높이의 100%를 말한다. 예를 들어 body에 height: 100vh;를 하면, 화면 높이의 100%인 것을 확인 할 수 있다.
align-items는 justify-content처럼 많은 옵션이 없다.
align-items: flex-start/flex-end/stretch/center/ ...;
stretch가 적용되지 않는 이유는, 아랫 줄에 div의 height가 300px으로 고정되어있기 때문이다.
<정리>
justify-content와 align-items를 적용하고 싶으면, 먼저 display: flex;를 해줘야 한다. display: flex;를 하면 해당 element인 body가(부모 Element) flex container가 될 것이다.
flex container는 두 개의 축을 가지고 있는데, main axis와 cross axis다. default로 main axis는 수평이고, cross axis는 수직이다. justify-content는 main axis에 적용되고, align-items는 cross axis에 적용된다. (나중에 main axis가 수직으로 적용되도록 바뀔 수도 있다.)
flex-container가 height를 가지고 있지 않으면(body가 height값을 갖고 있지 않으면), align-item을 사용하더라도 위치가 바뀌지 않는다.(이미 맨 위아래를 차지하고 중심에 있으니까 align-items를 설정해도 바뀌지 않음) 그렇기에 flex-container, 이 경우에서는 body의 height를 바꿔주면 된다. vh: viewport height라는 지표를 사용하면 화면 크기에 따라 바뀐다.
