Skip to content

CSS Flex

Jump to bottom
Yongku cho edited this page Apr 16, 2019 · 6 revisions

Flex Basic

Flex는 flex를 사용한 자식들에게 비율 크기를 할당해줍니다.

<div style="display: flex">
  <div style="flex: 1">flex(1)</div>
  <div style="flex: 3">flex(3)</div>
  <div style="flex: 2">flex(2)</div>
</div>

헤더는 이렇게 작성가능합니다.

<div style="display: flex">
  <div style="width: 200px">로고</div>
  <nav style="flex: 1">
    <ul>
      <li>메뉴1</li>
      <li>메뉴2</li>
      <li>메뉴3</li>
      <li>메뉴4</li>
      <li>메뉴5</li>
    </ul>
  </nav>
</div>

가로 정렬

<ul style="display: flex; flex-direction: row">
  <li style="flex: 1">메뉴1</li>
  <li style="flex: 1">메뉴2</li>
  <li style="flex: 1">메뉴3</li>
  <li style="flex: 1">메뉴4</li>
  <li style="flex: 1">메뉴5</li>
</ul>

콘텐츠들을 중앙 기준으로 모을 수 있어요

<div style="display: flex; justify-content: center">
  <button>Button1</button>
  <button>Button2</button>
  <button>Button3</button>
</div>

콘텐츠들을 오른쪽 기준으로 모을 수 있어요

<div style="display: flex; justify-content: flex-end">
  <button>Button1</button>
  <button>Button2</button>
  <button>Button3</button>
</div>

콘텐츠들을 왼쪽 기준으로 모을 수 있어요

<div style="display: flex; justify-content: flex-start">
  <button>Button1</button>
  <button>Button2</button>
  <button>Button3</button>
</div>

콘텐츠들을 각자 동일한 여백으로 정렬할 수 있어요

<div style="display: flex; justify-content: space-around">
  <button>Button1</button>
  <button>Button2</button>
  <button>Button3</button>
</div>

콘텐츠 양끝에 붙이고, 남은 여백을 기준으로 정렬할 수 있어요

<div style="display: flex; justify-content: space-between">
  <button>Button1</button>
  <button>Button2</button>
  <button>Button3</button>
</div>

콘텐츠 세로 전체를 차지할 수 있어요

<div style="display: flex; align-items: stretch; height: 200px;">
  <button>Button1</button>
  <button>Button2</button>
  <button>Button3</button>
</div>

Flex 레이아웃 코딩

헤더 코딩하기

<header style="display: flex; max-width: 1000px">
  <figure style="width: 150px">
    <img
      src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"
      style="width: 100%">
  </figure>
  <nav style="flex: 1">
    <ul style="display: flex; justify-content: space-between">
      <li><a href="">메뉴1</a></li>
      <li><a href="">메뉴2</a></li>
      <li><a href="">메뉴3</a></li>
      <li><a href="">메뉴4</a></li>
      <li><a href="">메뉴5</a></li>
    </ul>
  </nav>
</header>

1024px

480px

리스트 코딩

.wrapper {display: flex; justify-content: center}
.list {width: 1140px; display: flex; justify-content: space-between}
.list__item {width: 150px; text-align: center}
<div class="wrapper">
  <div class="list">
    <figure class="list__item">
      <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" style="width: 100%">
      <figcaption>아이템1</figcaption>
    </figure>
    <figure class="list__item">
      <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" style="width: 100%">
      <figcaption>아이템2</figcaption>
    </figure>
    <figure class="list__item">
      <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" style="width: 100%">
      <figcaption>아이템3</figcaption>
    </figure>
    <figure class="list__item">
      <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" style="width: 100%">
      <figcaption>아이템4</figcaption>
    </figure>
  </div>
</div>

Clone this wiki locally