今天要來講的就是 金魚都能懂的網頁切版 : 交錯漂浮版 NO004，
滿適合用在介紹公司的服務，
或是關於我們這類的區塊使用。

本篇關鍵字

• flex-shrink
• margin 負值
• flex 中的 order
• backdrop-filter

範例檔

HTML

<div class="container">
  <div class="item">
    <div class="pic">
      <img src="https://picsum.photos/600/350/?random=1">
    </div>
    <div class="text">
      <h2>Zombie@Dump</h2>
      <p>前端新手，原本在哭自己沒工作，在鐵人賽參賽期間意外找到了工作</p>
    </div>
  </div>
  <div class="item">
    <div class="pic">
      <img src="https://picsum.photos/600/350/?random=2">
    </div>
    <div class="text">
      <h2>Zombie@Dump</h2>
      <p>進公司需要學習新的框架，老實說有點戰戰兢兢的</p>
    </div>
  </div>
  <div class="item">
    <div class="pic">
      <img src="https://picsum.photos/600/350/?random=3">
    </div>
    <div class="text">
      <h2>Zombie@Dump</h2>
      <p>晚上還得發鐵人賽，鐵人賽還有兩邊 OTZ（我幹嘛呢我）</p>
    </div>
  </div>
  <div class="item">
    <div class="pic">
      <img src="https://picsum.photos/600/350/?random=4">
    </div>
    <div class="text">
      <h2>Zombie@Dump</h2>
      <p>這絕對是最甜蜜的負荷了，希望我能夠堅持下去</p>
    </div>
  </div>
</div>

CSS

body {
  padding: 100px 0;
  background-color: #ddd;
}

.container {
  width: 1200px;
  margin: auto;
}

.item {
  display: flex;
  align-items: flex-end;
  margin-bottom: 40px;
}

.item .pic {
  width: 55%;
  flex-shrink: 0;
}

.item .pic img {
  width: 100%;
  vertical-align: middle;
}

.item .text {
  width: 55%;
  flex-shrink: 0;
  position: relative;
  padding: 40px;
  backdrop-filter: blur(5px);
}

.item:nth-of-type(odd) .text {
  margin-left: -10%;
  background-color: rgba(254, 201, 121, .8);
}

.item:nth-of-type(even) .text {
  order: -1;
  margin-right: -10%;
  background-color: rgba(149, 219, 214, .8);
  text-align: right;
}

.item .text h2 {
  margin-bottom: 10px;
}

喪屍分解

• 圖片文字寬度皆設定 width: 55%，但在 flex 預設下，子層物件有 flex-shrink，所以要將 flex-shrink 設為 0
• 設定 margin 負值，使物件能夠交錯排列
• 設定 align-items 決定物件要靠上、靠下還是置中對齊
• flex 物件設定 order 可以調整物件排列順序
• 使用 backdrop-filter 製作出毛玻璃效果（IE 不支援，safari 需要加上 prefix）

以上就是今天的內容，如果有講不對的地方再請各位留言讓我知道，謝謝。
明天要講的是時間軸。