#css #flexbox #animation

CSS：利用Flexbox製作好看的Gallery伸縮效果

王淳藝 Celia Wang 2021/09/28 16:57:02

0 1614

在設計網頁時，有時會需要加入圖片集供瀏覽，這時如果想要製作一些特殊的Hover效果，就可以參考利用Flexbox特性做出來的伸縮效果，

讓我們一起來看看吧！

STEP 1

首先先建立出圖片集中各個圖片區塊：

<div class="gallery-wrap">
    <div class="item item-1"></div>
    <div class="item item-2"></div>
    <div class="item item-3"></div>
    <div class="item item-4"></div>
    <div class="item item-5"></div>
</div>

STEP 2

接著設定CSS樣式，首先是最外層的gallery-wrap：

.gallery-wrap {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 70vh;
}

需要先將外層利用display:flex; 變成彈性盒子的屬性，如此一來他的子元素就會變成彈性項目。

而在flex-direction: row的部分，則是宣告他的子元素排列的方向如下：

*圖片擷取自：https://wcc723.github.io/css/2017/07/21/css-flex/*

STEP 3

再來設定每個子項目的CSS樣式：

.item {
  flex: 1;
  height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: none;
  transition: flex 0.8s ease;
  
  &:hover{
    flex: 7;
  }
}

在這邊的flex屬性介紹如下：

flex 是縮寫，裡面依序包含三個屬性 flex-grow、flex-shrink 和 flex-basis，如果只設定一個則是 flex-grow。

flex-grow: 元件的伸展性，是一個數值，當空間分配還有剩餘時的當前元件的伸展性，預設值為 0，如果設置為 0 則不會縮放。

flex-shrink: 元件的收縮性: 元件的伸展性，是一個數值，當空間分配還不足時的當前元件的收縮性，預設值為 1，如果設置為 0 則不會縮放。

flex-basis: 元件的基準值，可使用不同的單位值。

*以上介紹擷取自：https://wcc723.github.io/css/2017/07/21/css-flex/*

因此flex的數值越大，所佔比例會越多，在此例子中初始狀態皆為flex:1，而當hover時變為flex:7，

因此就能創作出hover時彈性伸縮的效果！

STEP 4

最後只需要再將個區塊放入喜歡的圖片就完成啦！

.item-1 { 
  background-image: url('...');
}

.item-2 { 
  background-image: url('...');
}

.item-3 { 
  background-image: url('...');
}

.item-4 { 
  background-image: url('...');
}

.item-5 { 
  background-image: url('...');
}

完成效果如下：