1. html 結構

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

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

2. css 樣式

#container {
      display: flex;
      background: #555;
      height: 800px;
      flex-wrap: wrap;
      /* 專案在交叉軸對對齊方式(需要設定高度) */
      /* align-items: stretch; */
      /* 交叉起點對齊 */
      align-items: flex-start;
      /* 交叉終點對齊 */
      /* align-items: flex-end; */
      /* 以中心點進行對齊 */
      /* align-items: center; 
 
*/
      /* 按照第一行文字頂部進行對齊 */
      /* align-items: baseline; */

      /* 專案在主軸的對齊方式 */
      /* 左對齊 */
      /* justify-content: flex-start; */
      /* 右對齊 */
      /* justify-content: flex-end; */
      /* 居中對齊 */
      /* justify-content: center; */
      /* 兩端對齊 */
      /* justify-content: space-around; */
      /* 專案與專案之間的距離相等 */
      /* justify-content: space-between; */
      /* 專案之間的空隙數相等的 */
      /* justify-content: space-evenly; */
      /* 起點對齊 */
      /* align-content: flex-start; */
      /* 終點對齊 */
      /* align-content: flex-end; */
      /* 終點對齊 */
      /* align-content: center; */
      /* 兩個軸線之間的距離是相等的 */
      /* align-content: space-around; */
      /* 交叉軸的兩端進行對齊 */
      /* align-content: space-between; */
      /* 預設值 */
      /* align-content: stretch; */
    }
    .item {
      background: #f4f4f4;
      border: #ccc solid 1px;
      padding: 1rem;
      text-align: center;
      margin: 0.75rem;
      /* width: 300px; */
      flex-basis: 200px;
      /* 對齊屬性 */
    }
    /* 指定設定 */
    .item-2 {
      /* 對單個 item 進行操作 */
      align-self: center;
      /* auto (預設值)
      flex-start
      flex-end
      center
      baseline
      stretch */
      order: 2;
    }
    .item-1 {
      /* order 可以更改 item 的排列屬性  order的值越小他的值就越靠前(預設為0) */
      order: 3;
    }
    .item-3 {
      order: 1;
    }

這些註釋都是方法可以自己嘗試一下

 

3.  常用方法

專案在主軸的對齊方式

      左對齊       justify-content: flex-start;       右對齊       justify-content: flex-end;       居中對齊       justify-content: center;       兩端對齊       justify-content: space-around;       專案與專案之間的距離相等       justify-content: space-between;       專案之間的空隙數相等的       justify-content: space-evenly;   專案在交叉軸對對齊方式(需要設定高度) 　  align-items: stretch;       交叉起點對齊       align-items: flex-start;       交叉終點對齊       align-items: flex-end;       以中心點進行對齊       align-items: center;       按照第一行文字頂部進行對齊       align-items: baseline;

兩個軸的對齊方式

　   起點對齊       align-content: flex-start;       終點對齊       align-content: flex-end;       終點對齊       align-content: center;       兩個軸線之間的距離是相等的       align-content: space-around;       交叉軸的兩端進行對齊       align-content: space-between;       預設值       align-content: stretch;   指定設定 對齊方式     .item {       對單個 item 進行操作       align-self: center; 　　 　   方法       auto (預設值)       flex-start       flex-end       center       baseline       stretch     }   order 屬性 　　order 可以更改 item 的排列屬性  order的值越小他的值就越靠前(預設為0)