CSS Flex - ChoDragon9/posts GitHub Wiki

<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>

<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>

<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>