今天要講的是金魚都能懂的網頁切版 : 方塊酥版面 NO010，
看我的標題就知道，這個題目我想拆兩部分來講，
影片中 Amos 是用 float 來排版，
身為 flex 嚴重中毒的切版新手，
當然要堅持自我的使用 flex 來做出這個畫面，
提供給就是不想學 float 的人參考看看。
（其實不懂為什麼不想學啦～多會一樣東西不好嗎？）

本篇關鍵字

• pseudo-class
• flex-wrap
• transform: scale()

範例檔

HTML

  <div class="wrap">
    <div class="group">
      <div class="item">
        <img src="https://picsum.photos/500/500/?random=1">
        <div class="text">
          <h2>Zombie@Dump</h2>
          <p>到今天已經寫了 19 篇 + 19 篇了</p>
        </div>
      </div>
    </div>
    <div class="group">
      <div class="item">
        <img src="https://picsum.photos/500/500/?random=2">
        <div class="text">
          <h2>Zombie@Dump</h2>
          <p>對於能堅持到今天，嗯覺得應該鼓勵一下自己</p>
        </div>
      </div>
      <div class="item">
        <img src="https://picsum.photos/500/500/?random=3">
        <div class="text">
          <h2>Zombie@Dump</h2>
          <p>就決定今天的晚餐要去嗑牛排了，越想肚子越餓</p>
        </div>
      </div>
      <div class="item">
        <img src="https://picsum.photos/500/500/?random=4">
        <div class="text">
          <h2>Zombie@Dump</h2>
          <p>長時間坐在電腦前面的你，記得要偶爾站起來 move your body</p>
        </div>
      </div>
      <div class="item">
        <img src="https://picsum.photos/500/500/?random=5">
        <div class="text">
          <h2>Zombie@Dump</h2>
          <p>還有記得時時提醒自己要眨眨眼睛，不然眼睛會超容易乾</p>
        </div>
      </div>
    </div>
  </div>

CSS

.wrap {
  width: 100%;
  display: flex;
}

.group {
  width: 50%;
}

.group .item {
  position: relative;
}

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

.group:first-child .item {
  width: 100%;
}

.group:last-child {
  display: flex;
  flex-wrap: wrap;
}


.group:last-child .item {
  width: 50%;
}

.item .text {
  text-align: center;
  position: absolute;
  padding: 20px;
  box-sizing: border-box;
  background-color: rgba(255, 255, 255, .6);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transform: scale(0);
  transition: .5s;
}

.item:hover .text {
  opacity: 1;
  transform: scale(1);
}

.item .text h2{
  color: #0B346E;
  padding-bottom: 5px;
  margin-bottom: 10px;
  position: relative;
}

.item .text h2::after{
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 5px;
  background-color: #0B346E;
  border-radius: 5px;
}

喪屍分解

• 先做出 2 個 width: 50% 的 .group 包住內容的 .item ，最外層容器 .wrap 設定 display: flex 讓他們橫排
• 使用 pseudo-class 的 :first-child 及 last-child 分別設定 .group 子層 .item 的 width
• 第 2 個 .group 中有 4 個 .item， 寬度設定皆為 50%，若沒有設定 flex-wrap: wrap，物件會被縮放使其能塞在容器裡橫排
• 老樣子使用 position: absolute 將 .text 定位在 .item 上
• 利用 transform: scale() 做出 :hover 時，.text 像是蹦出來的效果

以上就是今天的內容，如果有講不對的地方再請各位留言讓我知道，謝謝。
明天要講的依舊是方塊酥版面。