1. html 結構

<div id="container">
    <div class="item">
      <h3>Item 1</h3>
    </div>
    <div class="item">
      <h3>Item 2</h3>
    </div>
    <div class="item">
      <h3>Item 3</h3>
    </div>
    <div class="item">
      <h3>Item 3
 
</h3>
    </div>
    <div class="item">
      <h3>Item 3</h3>
    </div>
    <div class="item">
      <h3>Item 3</h3>
    </div>
    <div class="item">
      <h3>Item 3</h3>
    </div>
    <div class="item">
      <h3>Item 3
 
</h3>
    </div>
    <div class="item">
      <h3>Item 3</h3>
    </div>
    <div class="item">
      <h3>Item 3</h3>
    </div>
    <div class="item">
      <h3>Item 3</h3>
    </div>
  </div>

2. css樣式

#container {
      display: flex;
      
 
/* 橫向排列 */
      /* flex-direction: row; */
      /* flex-wrap: wrap;  */
      /* 混合屬性 */
      flex-flow: row wrap;
      /* 橫向排列右對齊 */
      /* flex-direction: row-reverse;  */
      /* 縱向排列 */
      /* flex-direction: column; */
    }
    .item {
      background: #f4f4f4;
      border: #ccc solid 1px;
      padding: 1rem;
      text-align: center;
      margin: 0.75rem;
      /* 平均分配 */
      flex: 1;
    }
    .item:first-child {
      /* 對空間進行分配,定義專案的放大比例 */
      flex: 1;
    }

3. 重點

彈性佈局的必要

display: flex

橫向排列