교차 축 정렬

    
      .container {
        display: flex;
        height: 200px;
        border: 2px solid #000;
        padding: 10px;
        margin-bottom: 20px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
      }

      .align-stretch {
        align-items: stretch;
      }

      .align-flex-start {
        align-items: flex-start;
      }
    
  

    
      <div class="container align-stretch">
        <div class="item">요소 1</div>
        <div class="item">요소 2</div>
        <div class="item">요소 3</div>
      </div>

      <div class="container align-flex-start">
        <div class="item">요소 1</div>
        <div class="item">요소 2</div>
        <div class="item">요소 3</div>
      </div>
    
  

    
      .container {
        display: flex;
        height: 200px;
        border: 2px solid #000;
        padding: 10px;
        margin-bottom: 20px;
        align-items: flex-start;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
      }

      .self-flex-end {
        align-self: flex-end;
      }

      .self-center {
        align-self: center;
      }

      .self-baseline {
        align-self: baseline;
      }
    
  

    
      <div class="container">
        <div class="item self-flex-end">요소 3</div>
        <div class="item self-center">요소 4</div>
        <div class="item self-baseline">요소 5</div>
      </div>
    
  

    
      .center-container {
        display: flex;
        justify-content: center; /* 수평 중심 정렬 */
        align-items: center; /* 수직 중심 정렬 */
        height: 300px;
        border: 2px solid #000;
      }

      .center-item {
        background-color: #3498db;
        color: white;
        padding: 20px;
      }
    
  

    
      <div class="center-container">
        <div class="center-item">중앙 정렬된 요소</div>
      </div>