HTMLをコーディングしていて、flex-boxを使うとき、ちょっと苦労する点をクリアするための方法です。
例は、ボタンが３つ、ボタンとボタンの間隔が25px、最大幅950pxのときのものです。
通常なら、 justify-content: space-between; でOKじゃない？
確かに、そうなのですが、justify-content: space-between;で揃えようとすると、画面幅が小さくなったとき、メディアクエリを設定する必要があるので、面倒です。
そこで考えたのが、 transformを使って、ちょっとずらしてしまえ！
という力業です。
ポイントは、画面上の最大幅950px＋ボタンの間隔25px＝設定するmax-width975px
transform: translateX(12.5px); はボタン間隔の半分の値。
検索してもこの方法は出てこないので、もしかしたら、ダメかもしれません。
でも、IE11、Edge、Safari、Chrome、Firefoxでうまく動いてくれるので、大丈夫。
