HTML Page Layout : Flexbox로 레이아웃 잡기

페이지 레이아웃

Flexbox로 레이아웃 잡기

---

1. display: flex

   • 앞서 '기초 CSS의 이해 - 박스모델'에서 살펴봤듯, style 속성 display는 어떤 형식으로 보여질 건지, 박스모델의 display 방식을 결정하는 속성이다.
   • Flex layout이란, 부모 엘리먼트의 박스모델을 display: flex로 속성값(강조한 이유가 있다, 일단 기억해두자)을 지정하고, 그 아래로 자식 엘리먼트들을 구성하는 레이아웃 구성 방식.

2. Flex 요소(이하 '콘텐츠')들이 쌓이는 규칙
   콘텐츠들은 기본적으로 수평으로 쌓인다('flex-direction의 기본값이 row다'라고 한다).

   • 쌓는 방향(flex-direction)을 결정하는 속성값 두 가지: row, column (각각 -reverse가 있어서 사실은 4가지다)
   • 배치를 결정하기 위해서는, 만약 수직으로 쌓이고 있다면(flex-direction:row) 담기는 요소들은 height값만 정해서 배치를 결정하면 될 것이고, 수평으로 쌓인다면(flex-direction:column) 요소들은 width만 결정하면 될 것이다.

Flex 속성의 하위 속성

---

1. 콘텐츠들이 화면 면적을 차지하는 규칙

   1. 두 가지 기준과 하나의 원칙이 있다.

      • 하나의 원칙: 기본적으로 주어질 크기(basis). '크기'이므로 명확한 단위를 적은 값을 넣어야 한다.
      • 두 가지 기준: 늘어날 건지(grow), 줄어들 건지(shrink).
      • 합치면 이렇다: basis로 준 값으로 기본 세팅된 뒤에, 비율에 맞게 늘어나거나 혹은 줄어든다.

   2. 두 가지 기준과 하나의 원칙을 적용하는 방법

      • 콘텐츠의 스타일 속성 중 flex를 정의한다(flex라는 키워드가 부모 박스에서는 display 속성의 '속성값'으로 적용되지만, 콘텐츠에서는 '속성명'으로 쓰인다는 점을 혼동하지 말자).
      • 정의 규칙: flex: (grow) (shrink) (basis);

   3. 몇 가지 알아둘 점

      • width와 flex-basis를 동시에 적용할 경우, flex-basis가 우선한다.
      • 콘텐츠가 많아 자식 박스가 넘치면, width가 정확한 크기를 보장하지 않는다. max-width를 쓰면 자식 박스가 넘치는 것을 방지할 수 있다(...고 하는데 이건 무슨 말인지 모르겠다).
      • 늘어나거나 줄어들지 않으면서 basis값이 매우 커서 부모 크기를 넘어갈 경우, 부모 엘리먼트를 뚫고 나간다(`flex: 0 0 엄청큰수;).
      • 자식 박스들의 flex-grow 또는 flex-shrink값이 동일하더라도, flex-basis를 0으로 적용하지 않으면, 콘텐츠 크기가 기본으로 주어지기 때문에 비율이 정확하지 않을 수 있다. 정확히 동일한 비율로 나누고 싶다면 basis 값으로 0을 기입해야 한다.

2. 콘텐츠를 정렬하는 방법
   앞서 부모 박스의 flex-direction으로 row 또는 column을 설정했다(이걸 '정렬 방향'이라고 하자). 방향이 있다는 것은 축을 설정할 수 있다는 것이다.
   콘텐츠들은 정렬 방향을 기준으로, 동일한 선상의 축(justify-content)과 수직인 축(align-items)을 기준으로 각각 정렬할 수 있다.

   • justify-content :
     1. 콘텐츠를 정렬 방향의 시작점쪽으로 붙이기: flex-start(기본값)
     2. 콘텐츠를 정렬 방향의 끝쪽으로 붙이기: flex-end
     3. 콘텐츠를 정렬 방향의 중앙으로: center
     4. 콘텐츠를 각각 공백을 두고 공평하게 나눠 위치하도록: space-between, space-around, space-evenly
   • align-items :
     1. flex-start, end / center는 동일
     2. 컨테이너를 가득 채우도록 늘어남: stretch(기본값)

Flex를 재밌게 배울 수 있는 도구

---

Flex Froggy : 게임을 진행하며 flex layout의 여러 속성들을 배울 수 있다.