

ボタンの位置を揃えたいのですー

うーん、flex-directionとflex-growの組み合わせで対応できますよー
実装してみる
「詳しくはこちら」のボタンの位置を同じにしてみます。
これ、なにげに難しいのです。
頭の中に3パターン浮かびます。
の中のFlexboxを使ってみます。
最近はこれがベストかなと思っております。
簡単に説明しますと、
flex-directionで整えて、flex-growで揃える。
ですね。
See the Pen
Flexbox – flex-direction: column;とflex-grow: 1;を使ってボタンの位置を合わせる by 125naroom (@125naroom)
on CodePen.
コードはこちら
HTML
<div class="oneArea"> <div class="oneBox"> <p class="one_title">1</p> <div class="one_inner"> <div class="one_img"><img src="https://125naroom.com/wp/wp-content/themes/design125naroom/img/kinoko_pan.png" alt=""></div> <p class="one_text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<strong class="one_underline">テキストテキスト</strong>テキストテキストテキストテキストテキスト</p> </div> <div class="one_btn"><a href="https://125naroom.com/web/3833" target="_blank" class="btn"><span class="b__text">詳しくはこちら</span></a></div> </div> <div class="oneBox"> <p class="one_title">2</p> <div class="one_inner"> <div class="one_img"><img src="https://125naroom.com/wp/wp-content/themes/design125naroom/img/kinoko_pan.png" alt=""></div> <p class="one_text">テキストテキストテキストテキストテキストテキストテキストテキスト<strong class="one_underline">テキストテキスト</strong>テキストテキスト</p> </div> <div class="one_btn"><a href="https://125naroom.com/web/3833" target="_blank" class="btn"><span class="b__text">詳しくはこちら</span></a></div> </div> <div class="oneBox"> <p class="one_title">3</p> <div class="one_inner"> <div class="one_img"><img src="https://125naroom.com/wp/wp-content/themes/design125naroom/img/kinoko_pan.png" alt=""></div> <p class="one_text">テキストテキストテキスト<strong class="one_underline">テキストテキスト</strong>テキストテキストテキスト</p> </div> <div class="one_btn"><a href="https://125naroom.com/web/3833" target="_blank" class="btn"><span class="b__text">詳しくはこちら</span></a></div> </div> </div>
CSS
.oneArea { display: flex; flex-wrap: wrap; justify-content: space-between; max-width: 1024px; margin: 0 auto; } .oneArea .oneBox { width: 32%; padding: 20px; background: #fff; border: 2px solid #d47b70; box-sizing: border-box; display: flex; flex-direction: column; } .oneArea .oneBox p.one_title { font-size: 20px; text-align: center; } .oneArea .oneBox .one_inner { flex-grow: 1; } .oneArea .oneBox .one_inner .one_img { text-align: center; margin-bottom: 10px; } .oneArea .oneBox .one_inner .one_img img { max-width: 100%; } .oneArea .oneBox p.one_text { font-size: 14px; } .oneArea .oneBox .one_underline { background: rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #ffe46e 0%) repeat scroll 0 0; } .oneArea .oneBox > *:not(:last-child) { margin-bottom: 15px; }
制作メモ
flex-growは、IEでも問題ないですね。(2021年4月現在)
さいごに

おー、揃ったー

わーい
ちなみに代替案は、【jQuery】横並びの高さを揃える『matchHeight.js』ですー
ちなみに代替案は、【jQuery】横並びの高さを揃える『matchHeight.js』ですー
関連記事
おすすめ
かんれん
Googleさんのおすすめ
人気記事
- web / 2019.4.16
- 【CSS】ハンバーガーメニュー実装サンプル集(クリック時のエフェクトも集めました)
- web / 2022.2.1
- 【jQuery】アコーディオン実装サンプル10選
- web / 2019.9.27
- 【jQuery】スライダープラグイン「slick」実装サンプル集
Googleさんのおすすめ
デザインの記事
- 2023.09.29New
- センダイパルコ15th | 仙台PARCO
- 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
- デザインのこと – Web design gallery
- 2022.06.15
- ちょっと思い出しただけ
- (C)2022『ちょっと思い出しただけ』製作委員会 もくじ 『ちょっと思い出しただけ』 あ…
- いつかのこと – 無印良品の家と暮らす
- 2023.07.31
- 【Google Chrome】ショートカットキーまとめ(Windows or Mac)
- クロームでF5(更新)ってどうするんでしたっけ? あー、Macですか?わかるわかる、な…
- 125naroom / デザインするところ(会社)です。