子要素、孫要素の高さをきれいにそろえる

8月の終わりがあと2週間弱…

でも、まだまだ暑さが続いてますね。

さらに水分を補給しながら、体調管理には気を付けてください。

8月のイメージといえば、戦争しか連想できません…

広島原爆・長崎原爆・終戦記念日…

日本の行事といえば、夏祭りしかイメージがわかないですね。

暦の上では、秋の季節になっていますが…

有意義な夏の時間を思いきり楽しんでますか?

さてと、話題を取り戻して…

子要素、孫要素の高さをきれいにそろえる

display:flexのCSSが最近、使う機会が増えました。

今までは、親要素にposition:relativeを設定して、子要素にposition:absoluteを使って、バランスよく設定していました。

でも、レスポンシブ対応(スマホ、タブレット)を見るとなんか中途半端な空白ができてしまいます。

それを解消するために、メディアクエリを入れてレイアウトをデザインをしていました。

なんか、手間がかかるなぁと、いろんな試行錯誤をしてみました。

しかし、お助けのサイトから見つかりました。

【Flexbox】横並びデザインの子要素・孫要素の高さを揃える!

投稿の記事を見ると、2021年…

こっちの技術の習得の格差がめっちゃ古い…

使い方はいろいろ書かれていますので、ご参考として使わせていただきます。

やっぱり、ネットの情報の共有が大切だなぁと改めて考えるいい機会でした。

ありがとうございます。

これで、遅れた技術を取り戻して革新の技術を進歩していきます。

では、また!

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください