[ Do it! HTML + CSS 웹 표준의 정석 스터디!] 11 플렉스 박스 레이아웃으로 배치하기

DAY 15

🔖 오늘 읽은 범위 :

⭐️01/23(금) 진도표 알림
✅공부 내용: 11 플렉스 박스 레이아웃으로 배치하기
✅ 쪽수: 342~369쪽

---

😃 **기억하고 싶은 내용 (복붙해도 상관없어!)**

플렉스 박스 레이아웃

• 웹 요소를 가로로 배치하다가 화면에 가득 차면 아래로 내려서 다시 옆으로 배치하는 방식.
• 배치 방향, 정렬 방법 지정 가능. 웹 요소 간격 조정 가능.

플렉스 박스 레이아웃 구조

• 플렉스 컨테이너 flex container : 부모 박스. 적용할 대상을 묶는 요소.
• 플렉스 항목 flex item : 적용할 대상.
• 주축 main axis
  • 플렉스 항목 배치하는 기본 방향.
  • 기본값은 “왼쪽 → 오른쪽” 수평 방향 배치.
  • 배치 시작 위치 : 주축 시작점
  • 배치 종료 위치 : 주축 끝점
• 교차축 cross axis
  • 주축 배치하다가 끝점까지 닿을 때 어떻게 배치할 것인지 결정하는 속성.
  • 기본값은 “위 → 아래” 배치.
  • 배치 시작 위치: 교차축 시작점.
  • 배치 종료 위치 : 교차축 끝점.
• 플렉스 박스 레이아웃 생성 순서
  1. CSS 로 적용 대상을 플렉스 컨테이너로 지정.
  2. 컨테이너 안에 플렉스 항목 작성하기.
  3. CSS 주축과 교차축 지정하기.
  4. CSS 교차축의 배치 방법 지정하기.

플렉스 컨테이너 속성

• 컨테이너 속성

  • justify-content : 주축의 정렬 방법.
  • align-items : 교차축의 정렬 방법.
  • align-content : 교차축의 여러 줄 표시에 사용할 정렬 방법.

• 컨테이너 안 항목 속성

  • align-self : 플렉스 항목을 각각 따로 정렬함.

• 플렉스 컨테이너 지정 : display 속성

  • 배치할 웹 요소를 깜사는 부모 요소를 만들고, 플렉스 컨테이너로 지정.

    속성값	설명
    flex	블록 레벨
    inline-flex	인라인 레벨

• 플렉스 방향 지정 : flex-direction 속성

  • 컨테이너의 주축과 방향을 지정.

    속성값	설명
    row	주축 가로 지정. 왼쪽 → 오른쪽 정렬. 기본값.
    row-reverse	주축 가로 지정. 오른쪽 → 왼쪽 정렬.
    column	주축 세로 지정. 위 → 아래 정렬.
    column-reverse	주추 가로 지정. 아래 → 위 정렬.

• 플렉스 항목의 줄을 바꾼다 : flex-wrap

  • 플렉스 컨테이너 너비보다 플렉스 항목이 많은 경우, 줄을 바꿀지 여부를 지정함.

    속성값	설명
    nowrap	한 줄로 표시. 기본값.
    wrap	여러 줄로 표시.
    wrap-reverse	여러 줄로 표시 하되, 교차축의 시작점과 끝점이 바뀜.

• 배치 방향과 줄 바꿈을 한꺼번에 지정 : flex-flow

  • flex-direction 속성과 flex-wrap 속성을 한꺼번에 지정함. 기본값은 ‘row nowrap’.

• 주축 정렬 방법 지정 : justify-content

  • 주축에서 플렉스 항목 간의 정렬 방법 지정.

    속성값	설명
    flex-start	주축의 시작점에 맞춰 정렬. 기본값.
    flex-end	주축의 끝점에 맞춰 정렬.
    center	주축의 중앙에 맞춰 정렬.
    space-around	항목을 고르게 정렬. 각 항목은 양쪽 여백의 절반만큼 자리를 차지함.
    space-between	첫 항목과 마지막 항목은 양 끝단에 배치하되 나머지 항목은 같은 간격으로 정렬.
    space-evenly	항목을 고르게 정렬. 각 항목의 여백은 모두 동일함.

• justify-content, margin 함께 사용하기

  • 주축에서 플렉스 항목을 한 줄로 정렬할 때 이 두가지 속성을 함께 사용할 경우 다양한 적용을 할 수 있음.
  • margin 속성은 플렉스 항목에서 사용함.

• 교차축 정렬 방법 지정 : align-items

  • 교차축에서 항목을 정렬 하는 방법.

    속성값	설명
    flex-start	교차축 시작점에 맞춰서 정렬.
    flex-end	교차축 끝점에 맞춰서 정렬.
    center	교차축 중앙에 정렬.
    baseline	교차축 문자 기준선에 맞춰 정렬.
    stretch	플렉스 항목을 늘려서 교차축에 가득차게 정렬. 기본값.

• 특정 항목만 정렬 방법을 지정 : align-self

  • 특정 플렉스 항목만 정렬 방법을 지정함.

    속성값	설명
    auto	부모 요소의 align-items 값 사용해서 정렬. 기본값.
    normal	레이아웃 형태 또는 브라우저에 따라 다르게 정렬.
    flex-start	플렉스 컨테이너 시작점에 맞춰 정렬.
    flex-end	플렉스 컨테이너 끝점에 맞춰 정렬.
    self-start	플렉스 항목의 시작 위치에 맞춰 정렬.
    텍스트를 포함하고 있을 경우 LTR, RTL에 따라 시작 위치가 결정됨.
    self-end	플렉스 항목의 끝 위치에 맞춰 정렬.
    텍스트를 포함하고 있을 경우 LTR, RTL에 따라 끝 위치가 결정됨.
    baseline	플렉스 항목의 텍스트 기준선에 맞춰 정렬.
    center	플렉스 컨테이너 중앙에 정렬.
    stretch	플렉스 컨테이너 높이에 가득 차게 늘려서 정렬.

• 여러 줄일 때 교차축 정렬 방법 지정 : align-content

  • 주축에서 줄 바꿈이 생겨서 플렉스 항목을 여러 줄로 표시할 경우, 교차축에서 플렉스 항목의 정렬 방법을 지정함.

    속성값	설명
    flex-start	교차축의 시작점에 맞게 정렬.
    flex-end	교차축의 끝점에 맞게 정렬.
    center	교차축의 중앙에 맞게 정렬.
    space-between	첫 번째 항목과 끝 항목을 교차축의 시작점과 끝점에 맞춤. 나머지 항목은 같은 간격으로 정렬함.
    space-around	모든 항목을 교차축에 같은 간격으로 정렬함.
    stretch	플렉스 항목을 늘려서 교차축에 가득차게 정렬함. 기본값.

    <style>
    #opt1 {
    align-content: flex-start;
    }
    #opt2 {
    align-content: flex-end;
    }
    #opt3 {
    align-content: center;
    }
    #opt4 {
    align-content: space-between;
    }
    #opt5 {
    align-content: space-around;
    }
    #opt6 {
    align-content: stretch;
    }
    </style>

• 플렉스 레이아웃을 활용해 항상 중앙에 표시하기

  • 부모 요소를 플렉스 컨테이너로 하기.

  • 주축과 교차축의 정렬 방법을 중앙으로 정렬.

  • 플렉스 컨테이너의 높이 = 내용만큼만 인식.

  • 플렉스 컨테이너 높이를 뷰포트 높이로 지정. ⇒ 최소 높이를 뷰포트 높이 전체로 지정.

    <-- 중앙 정렬 코드. 이걸 매우 자주 사용함. -->
    <style>
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
      }
    </style>

• 플렉스 항목 간에 여백을 두기 : gap 속성

  • 플렉스 컨테이너 안에 있는 여러 플렉스 항목의 간격을 조절함.

  • 컨테이너 안의 모든 항목에 동일 적용.

  • 가로 세로 간격을 따로 조절 한다면? row-gap, column-gap 으로 값을 따로 지정.

    💡margin 속성과 gap 속성의 차이

  • margin : 플렉스 항목마다 외부 간격을 지정.

  • gap : 플렉스 항목 모두에 동일한 간격을 지정.

  • 마진은 마진 병합을 고려하나, gap 은 인접한 요소만 있을 때만 간격이 적용 됨.

반응형 웹을 위한 속성

• 플렉스 박스 레이아웃은 화면 너비에 따라 웹 요소의 크기를 자동으로 변경할 수 있어 편리함.
• 반응형 웹에 사용하는 추가 속성들을 알아보기.

플렉스 박스 유연성

• 플렉서블 박스 레이아웃

• 항목 마다 크기 조절을 위한 4가지 속성

  속성	설명
  flex-basis	플렉스 항목의 기본 크기 지정.
  flex-grow	공간이 남으면 플렉스 항목을 늘이기.
  flex-shrink	공간이 부족하면 플렉스 항목을 줄이기.
  flex	flex-basis, flex-grow, flex-shrink 속성을 한꺼번에 지정함.

• 기본 크기 지정 : flex-basis

  • flex-direction: row ⇒ 플렉스 항목의 너비
  • flex-direction: column ⇒ 플렉스 항목의 높이
  • 기본값은 auto. 가로 배치에서 width 속성이 있거나 세로 배치에서 height 속성이 있다면, 그 값을 사용함. 없으면 콘텐츠 영역 만큼 크기 차지함.

• 플렉스 항목 확장 : flex-grow

  • 화면 너비가 커서 플렉스 항목을 채우고도 남는 공간이 생김. 이 공간을 어떻게 나눌지 지정하는 것.

  • 기본값은 0. 확장하지 않는다는 의미. 음수값은 없음.

    <!-- 컨테이너 너비에서 플렉스 항목과 갭을 모두 뺀 나머지 공간을 1:1:2 비율로 나눠서 확장함. -->
    <style>
    #box1 {
      flex-grow: 1;
    }
    #box2 {
      flex-grow: 1;
    }
    #box4 {
      flex-grow: 2;
    }
    </style>
    
    <body>
    <div class="container">
      <div class="box" id="box1"><p>1</p></div> <!-- 기본 크기 + 1/4 -->
      <div class="box" id="box2"><p>2</p></div> <!-- 기본 크기 + 1/4 -->
      <div class="box" id="box3"><p>3</p></div> <!-- 기본 크기 -->
      <div class="box" id="box4"><p>4</p></div> <!-- 기본 크기 + 2/4 -->
    </div>          
    </body>

• 플렉스 항목 축소 : flex-shrink

  • 플렉스 컨테이너 너비가 줄어들 경우, 플렉스 항목의 너비도 자연스럽게 줄어들도록 설정함.

  • 속성값은 숫자값. 축소 비율을 의미. 1과 0은 아래 설명 참고.

    속성값	설명
    1	컨테이너에 맞춰 플렉스 항목을 축소.
    0	플렉스 항목을 축소하지 않음.

    <style>
      #box1 {
        flex-shrink: 1;
      }
      #box2 {
        flex-shrink: 0;
      }
      #box3 {
        flex-shrink: 1;
      }
      #box4 {
        flex-shrink: 2;
      }
    </style>

• 확장, 축소를 한꺼번에 지정하기 : flex 속성

  • flex = flex-grow, flex-shrink, flex-basis

  • 순서를 지키는 게 중요함.

  • 3개 속성 기본값 : 0, 1, auto

  • 속성 개수 및 단위 유무에 따른 적용 속성 차이

    flex: 1; /* **flex-grow:1, flex-shrink:1, flex-basis:0** */
    flex: 3; /* **flex-grow:3, flex-shrink:1, flex-basis:0** */
    flex: 0 1 auto; /* **flex-grow:0, flex-shrink:1, flex-basis:auto** */
    flex: 1 300px; /* **flex-grow:1, flex-shrink:1, flex-basis:300px** */

  • flex: none

    • 플렉스 컨테이너 안에서 플렉스 항목이 확장하거나 축소되지 않음.
    • 크기는 미리 정해 놓은 width, height 값을 사용. 없으면 내용의 크기에 따라 결정. == flex: 0 0 auto
    • 플렉스 박스 레이아웃에서 특정 부분만 확장 축소 하지 않도록 만듬.

  • flex: auto

    • 플렉스 항목 크기를 auto 로 설정함.
    • flex-grow, flex-shrink 를 각각 1로 설정함.
    • flex: 1 1 auto 와 동일함.
    • 플렉스 항목에 width or height 값이 있다면 그 값을 크기로 사용함. 값이 없으면 내용만큼 영역 차지함.
    • 공간이 남으면 모든 플렉스 항목을 동일 비율로 확장. 공간이 부족하면 동일 비율로 축소.

🤔 **오늘의 파트에 대한 소감 (매우 주관적주의)**

• 플렉스 박스 레이아웃이 중요함. 강조할 필요가 있고 알 게 있음.
• 아래 링크처럼 게임처럼 즐기고 연습하는 게 있어서 해보는 게 좋음.

🔎 **추가로 알게 된 것 (책 내용 +알파로 궁금한 것, 이해가 가지 않는 것 등)**

• https://www.w3.org/TR/css-flexbox-1/
• https://flexboxfroggy.com/#ko
  • 반응형 웹을 만들 때 자주 사용하기 때문에 꼭 익혀두는 것이 좋음.

---

🤟소감 3줄 요약

• 날이 너무 추움.
• 알아야 할 속성도 많고 비슷한 것도 많아서 어렵다.
• flex 속성은 뭔가… 규칙이 많네..