CSS-由左到右、由右到左，利用direction-reserve排版

概念

• 定義外層容器為一個靈活盒子
• 使用flex-direction定義「由右到左」、「由左到右」的兩種排版類別
• 兩種排版交互使用

  實作

• 定義外層容器display: flex
• flex-direction:row:row方向預設值為「由左到右」
• flex-direction:row-reverse:方向反轉則為「由右到左」

  <div class="pieces-group">
      <div class="piece content-right">
          <div class="piece-photo"></div>
          <div class="piece-content"></div>
      </div>
      <div class="piece content-left">
          <div class="piece-photo"></div>
          <div class="piece-content"></div>
      </div>
      <div class="piece content-right">
          <div class="piece-photo"></div>
          <div class="piece-content"></div>
      </div>
  </div>

.piece{
    display: flex;
}
.content-right{
    flex-direction:row;
}
.content-left{
    flex-direction:row-reverse;
}

• 定義小螢幕尺寸時，容器內的items方向為column「由上到下」

  @media screen and (max-width: 994px){
      #projects-section .piece{
              flex-direction:column;
          }
  }

成果

My Project-Profile-Education page