flexitemの高さを揃える

こんにちは！

マーケティング部受託プロダクトチームのインターン生、村高歩夢です！

昨日は久しぶりにHTML/CSSでどん詰まりして検証していましたが、結局分からずでした。

こういう時よくあるのが、0からからやると意外と上手くいく。

ということで、0からやると爆速で完成しました。

フィードバックが楽しみです。

しかも、今回ラッキーなことにコーディング途中、昨日わからなかったことも解消することができました！

flexitemの高さがどうしても揃わない

これにめちゃくちゃ時間がかかってしまいました。

調べたところflexboxにalign-items: centerを書くと

flexitemの高さがそれぞれのflexitemの子孫要素の高さに依存するようになる

とのこと。

でも、僕align-items使ってないんですよね。

そして今日たまたま解決しちゃいました！

それは、

borderをどの要素にかけるか

flexitemに直接borderをつけたところ、同じ行のflexitemの高さは同じになります。

一方で、flexitemの子要素にborderをつけるとflexitemの高さは揃わなくなりました。

See the Pen Untitled by 村高歩夢 (@rapeotdu-the-vuer) on CodePen.

上の図、0.5倍が一番見やすいです。

発見はしましたが、これがなぜなのかまだ理解できていないので、これからも検証し続けていきます。

ちなみに、昨日のブリは弟に大不評でした。

作る量が多くなると味薄くなっちゃうんですよね。

---

■ガーディアン主力ソリューション→OWLet

■新サービスリリースのお知らせ

WEB業界を変える！育てて成果を上げるサブスク型HPサービス

→SCSC (スクスク)

ガーディアンのインターン制度→こちら

村高歩夢の紹介ページ→こちら