CSS3でマウスオーバーしたボタンだけ横幅をアニメーションで広げて、他は狭くするやつ(Flexbox) 横並びのナビゲーションとかでマウスオーバーしたボタンだけ横に広がって、大きくなった分だけ他のボタンが狭くなるというやつです。 ちょっと説明よくわからないですが、サンプルを用意しました。 投稿日2016年02月29日 更新日2019年04月13日 See the Pen Flexbox Animetion Width by webopixel (@webopixel) on CodePen. HTML HTMLはシンプルなリストでマークアップしてます。 HTML <nav id="main-nav"> <ul> <li><a href="#">Green</a></li> <li><a href="#">Purple</a></li> <li><a href="#">Red</a></li
![CSS3でマウスオーバーしたボタンだけ横幅をアニメーションで広げて、他は狭くするやつ(Flexbox)](https://cdn-ak-scissors.b.st-hatena.com/image/square/fef34c0c43a7355d8826cb8120bbac999f678c49/height=288;version=1;width=512/https%3A%2F%2Fwww.webopixel.net%2Fblog%2Fwp-content%2Fuploads%2F2016%2F02%2F0229s.png)