flex-align-content.html

<style>
  .container { 
    display: flex;
    flex-flow: row nowrap;
    align-content: stretch;
  }
</style>

<div class="container">
  <div>1</div>
  <div>2</div>
  ...
</div>

flex-align-items.html

<style>
  .container { 
    display: flex;
    flex-flow: row nowrap;
    align-items: stretch;
  }
  
  /* baseline 이해를 돕기 위한 가시성 선언 */
  .container div:nth-child(1) { padding: 10px 40px 0 40px }
  .container div:nth-child(2) { padding: 20px 40px }
  .container div:nth-child(3) { padding: 10px 40px 80px 40px }
  .container div:nth-child(4) { padding: 40px 40px 20px 40px }
  .container div:nth-child(5) { padding: 20px 40px 10px 40px }
</style>

<div class="container">
  <div>1</div>
  <div>2</div>
  ...
</div>

flex-align-self.html

<style>
  .container { 
    display: flex;
    flex-: row;
    align-items: stretch;
  }
  
  .container .item3 { align-self: stretch }
</style>

<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  ...
</div>

flex-basis.html

<style>
  ...
  .container .item1 { flex-basis: 100px }
</style>

<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  ...
</div>

flex-block-1.html

<style>
  .container {
    display: flex;
    flex-direction: row;
  }

  .item.left {
    flex-shrink: 0;
    width: 150px;
  }
  
  .item.right { flex-grow: 1; }
</style>

<div class="container">
  <div class="item left">1</div>
  <div class="item right">2</div>
</div>

flex-block-2.html

<style>
  ...
  .item.left {
    width: 150px;
    flex-grow: 1;
    flex-shrink: 0;
  }

  .item.right { width: 100% }
</style>

flex-direction.html

<style>
  .container { 
    display: flex;
    flex-direction: row;
  }
</style>

<div class="container">
  <div>1</div>
  <div>2</div>
  ...
</div>

flex-flex.html

<style>
  ...
  .container .item1 { flex: 0 1 100px }
</style>

<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  ...
</div>

flex-gap.html

<style>
  .container { 
    display: flex;
    flex-flow: row nowrap;
    gap: 20px;
  }
  
  /* 모든 자식 요소를 뷰포트에 채움 */
  .container .item { flex-grow: 1 }
</style>

<div class="container">
  <div>1</div>
  <div>2</div>
  ...
</div>

flex-grow.html

<style>
  ...
  
  /* 모든 자식 요소를 뷰포트에 채움 */
  .container .item { flex-grow: 1 }
  
  /* 특정 자식 요소만 다른 요소보다 크게 */
  .container item.big { flex-grow: 2 }
</style>

<div class="container">
  <div class="item">1</div>
  <div class="item big">2</div>
  ...
</div>

flex-justify-content.html

<style>
  .container { 
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
</style>

<div class="container">
  <div>1</div>
  <div>2</div>
  ...
</div>

flex-order.html

<style>
  .container { 
    display: flex;
    flex-flow: row nowrap;
  }
  
  /* 화면 크기가 768px 이하면 끝으로 */
  @media screen and (max-width: 768px) {
    .container { flex-direction : column }
    .last-with-mobile { order: 1 }
  }
</style>

<div class="container">
  <div class="last-with-mobile">1</div>
  <div>2</div>
  ...
</div>

flex-shrink.html

<style>
  ...
  .container .small { flex-shrink: 2 }
</style>

<div class="container">
  <div class="small">1</div>
  <div>2</div>
  ...
</div>

flex-wrap.html

<style>
  .container { 
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
  }
</style>

<div class="container">
  <div>1</div>
  <div>2</div>
  ...
</div>

flex.html

<style>
  .container { 
    display: flex;
  }
</style>

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>