CSS3でマウスオーバーしたボタンだけ横幅をアニメーションで広げて、他は狭くするやつ（Flexbox）

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

[torinky]

CSS3でマウスオーバーしたボタンだけ横幅をアニメーションで広げて、他は狭くするやつ（Flexbox）

[northgeek]

実務で良くやる動き。Flexboxを使うと簡単にできますよね。今はCSSだけでいけちゃう。