WEB LAB
    HTML/CSS 3.3 · 3부. 배치

    Flexbox 크기

    자리가 남거나 모자랄 때 항목이 늘고 주는 방식을 정합니다.

    예상 학습 시간 18분 예제를 고치면 화면이 그대로 다시 그려집니다 난이도 초급
    개념 설명

    남거나 모자랄 때

    3.2 는 남는 자리를 어디에 둘지 정했습니다. 이 단원은 그 자리를 항목이 나눠 가지게 합니다. 반대로 자리가 모자랄 때 어떻게 줄일지도 정합니다.

    속성은 셋인데 대개 flex 한 줄로 함께 적습니다.

    최소 예제 · 편집 가능

    남는 자리 나눠 갖기

    <div class="row">
  <div class="item">고정</div>
  <div class="item grow">남는 자리를 차지합니다</div>
  <div class="item">고정</div>
</div>

<div class="row">
  <div class="item grow">1</div>
  <div class="item grow2">2 — 두 배</div>
</div>
    .row {
  display: flex; gap: 8px;
  background: #f1f3f5; padding: 8px; margin-bottom: 10px;
}
.item { background: #ece7fb; padding: 10px; }

/* 남는 자리를 나눠 갖는 비율입니다. 0 이면 갖지 않습니다. */
.grow  { flex-grow: 1; }
.grow2 { flex-grow: 2; }

    flex-grow 는 비율입니다. 1 과 2 를 주면 남는 자리를 1:2 로 나눕니다. 항목의 최종 너비가 1:2 가 되는 것이 아닙니다 — 남는 자리만 그 비율로 나눕니다.

    상세 사용법

    세 속성과 flex 한 줄

    속성정하는 것기본값
    flex-grow남는 자리를 나눠 갖는 비율입니다.0 — 갖지 않습니다.
    flex-shrink모자랄 때 줄어드는 비율입니다.1 — 줄어듭니다.
    flex-basis나누기 전의 기준 크기입니다.auto — 내용만큼.
    style.css 
    /* 셋을 한 줄로 — grow shrink basis 차례입니다 */
flex: 1 1 0;

/* 자주 쓰는 줄임말 */
flex: 1;      /* 1 1 0  — 남는 자리를 똑같이 나눕니다 */
flex: auto;   /* 1 1 auto — 내용 크기를 기준으로 나눕니다 */
flex: none;   /* 0 0 auto — 늘지도 줄지도 않습니다 */

    flex: 1 과 flex: auto 는 다릅니다. 앞엣것은 기준을 0 으로 두어 내용과 상관없이 똑같이 나누고, 뒤엣것은 내용이 긴 항목이 더 넓어집니다. 

    <p>flex: 1 — 내용과 상관없이 같은 너비</p>
<div class="row a">
  <div>짧음</div>
  <div>아주 긴 내용이 들어 있는 항목</div>
</div>

<p>flex: auto — 내용이 길면 더 넓게</p>
<div class="row b">
  <div>짧음</div>
  <div>아주 긴 내용이 들어 있는 항목</div>
</div>
    .row { display: flex; gap: 8px; margin-bottom: 10px; }
.row > div { background: #ece7fb; padding: 10px; }

.a > div { flex: 1; }
.b > div { flex: auto; }
    최소 예제 · 편집 가능

    줄바꿈

    기본값은 줄을 바꾸지 않습니다. 자리가 모자라면 항목을 줄여서라도 한 줄에 넣습니다. flex-wrap: wrap 을 주면 넘칠 때 다음 줄로 내려갑니다. 

    <div class="wrap">
  <div class="card">카드 1</div>
  <div class="card">카드 2</div>
  <div class="card">카드 3</div>
  <div class="card">카드 4</div>
</div>
    .wrap {
  display: flex;
  flex-wrap: wrap;   /* nowrap 으로 바꿔 보십시오 */
  gap: 10px;
}

.card {
  flex: 1 1 180px;  /* 180px 아래로는 줄지 않고 줄을 바꿉니다 */
  background: #ece7fb;
  padding: 16px;
  border-radius: 8px;
}

    flex: 1 1 180px 이 카드 목록의 정석입니다. 자리가 있으면 늘어나고, 180px 아래로 좁아지면 다음 줄로 내려갑니다. 미디어 쿼리 없이도 화면 폭에 따라 열 수가 바뀝니다.

    흔한 실수

    세 가지

    • 항목이 찌그러집니다. 기본값이 nowrap 이라 한 줄에 밀어 넣기 때문입니다. flex-wrap: wrap 을 주십시오.
    • width 를 주었는데 지켜지지 않습니다. flex-shrink 기본값이 1 이라 모자라면 줄어듭니다. 지켜야 하면 flex-shrink: 0 을 주십시오.
    • 긴 글이 든 항목이 넘칩니다. flex 항목의 최소 너비가 내용 크기라 줄어들지 못하는 것입니다. min-width: 0 을 주면 줄어들 수 있습니다.
    실습 문제

    직접 해보기

    1. 검색 줄 만들기 난이도 중

    입력 칸과 단추를 나란히 놓되, 입력 칸이 남는 자리를 모두 차지하고 단추는 내용만큼만 차지하게 하십시오.

    남는 자리를 갖는 것은 flex: 1 입니다. 단추는 아무것도 적지 않으면 기본값(늘지 않음) 그대로입니다.
    .search { display: flex; gap: 8px; } .search input { flex: 1; } /* 단추는 그대로 두면 됩니다 — flex-grow 기본값이 0 입니다 */
    요약

    정리

    • flex-grow 는 남는 자리를 나눠 갖는 비율입니다.
    • flex: 1 은 내용과 상관없이 똑같이, flex: auto 는 내용에 따라 나눕니다.
    • 기본은 줄을 바꾸지 않습니다. flex-wrap: wrap 이 필요합니다.
    • flex: 1 1 180px 은 폭에 따라 열 수가 바뀌는 카드 목록을 만듭니다.