はじめに
初めまして r-higaと言います。システムの部署にいますが、普段はwebデザインをメインにフロントコーディングも少し行ってます。
今回はタイトルの通りflex-directionでリストカセット内のボタン位置を揃えようとしたら、ちょっとしたところでひっかかりもったいないオバケに時間を食べられてしまったので、備忘録として残しておきます。
結論
可変するカセット内にflex-directionをかけて要素を固定する場合は「margin: auto;」が必須でした。
詳細
真ん中部分のテキストが可変するリストカセットで、同行内の一番長いカセットに合わせて伸縮、ボタンが下部に固定されるレイアウトです。
で、引っ掛かったのがここ
レイアウト的に中央部分のテキストが可変のため、高さをpxや%などで固定せずにどうにか高さを持たせるために試行錯誤してました。
flexの縦並びの順番を決められるflex-directionの「column」なら、特定の要素が固定されて揃うだろう、となぜか思い込み下記だけを追加してました。今思うと絶対求めるレイアウトにならないのにね
li{
display: flex;
flex-direction: column;
}
追加後にウッキウキで確認すると、あれ？揃って…ない？
それもそのはず、flex-directionは「上から順番に並べるだけ」のプロパティなので、固定するには他のプロパティを追加しないといけないことを理解してなかったのでした…
これで固定されなかったので、テキストのタグにheight:100%;つけたり（すごく縦に伸びた）、ボタン要素をpositionで固定したり（テキストの上にボタンが乗る状態になりあれこれプロパティ追加しまくり）しましたが上手くいかず、最終的には固定したい要素に下記をつけることで解決しました。
.btn{margin-top: auto;}
基本の「margin:auto;」じゃん…！
「auto」だと指定した方向の余白がmarginの扱いになるので、今回のような可変のレイアウトにはすごく便利！
最終的なものがこちら
See the Pen flexboxのあれ by ion_neko (@ion_neko) on CodePen.
※IE11も対応範囲の場合は「width: calc()」からcalcを削除してpxか%で指定してくださいいや～完成してよかった！！
おわりに
Flexbox好きなので使用してましたが、意外と特性をわかってませんでした。「わかっているつもり」って結構危ないと理解（わか）らされました…もっと勉強します
参考資料
colis（最終閲覧日：2021年7月12日）