Flex-boxで横並びにしたボタンの位置の揃え方

目次

display: flex; で横並びにしたボタンの位置がバラバラ

要素を横並びに flexbox を使用した時によくある各要素についているボタン。
display: flex; で横並びにした時にテキストの長さで位置がバラバラになりがち。
これをそろえて見栄えをよくする CSS を紹介。

普通に横ならび

まずは普通に display: flex; で横並び
テキストの長さによって button の位置がバラバラ

テキストテキストテキスト

テキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキスト

ボタンの位置を調整する CSS

子要素(.flexbox)とボタンに、下記の 3行のCSS を加えるとボタンの位置が子要素の一番下を基準に横並びになる

.flexbox{
display: flex;
flex-direction: column;
}
.flexbox button{
margin-top: auto;
}

テキストテキストテキスト

テキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキスト

ボタンとテキストの間の余白の調整

ボタンとテキストの間の余白の調整はテキスト部分に margin-bottom でボタンの位置を揃えたまま、余白を調整できる

テキストテキストテキスト

テキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキスト

-広告-

国内WordPressテーマ シェア率 No.1

Web制作案件にも使いやすい WordPress テーマ

SWELL

シンプルで多機能、そしてカスタマイズしやすい

ダッシュボードやカスタマイズ画面に沢山の設定が追加されていて、ノーコードでも相当なカスタマイズが可能。
追加CSS、追加JavaScript をページ毎に入力欄があるので、細部までこだわったサイト制作が可能。

買い切り型で、複数サイトに使用可能、Web制作案件にも

一度購入すれば、いくつのサイトに使用してもOK。フリーランスのWeb制作案件にも使えます。
メンバー登録すればテーマ更新も無償。

  • 一度買えば、月額料金はなし
  • 複数サイトで使用可能
  • ノーコードでも調整できる設定が、ダッシュボードやカスタマイズ画面に大量追加
  • ブロックエディタの豊富な追加ブロックで投稿がリッチに
  • 細部の調整が、「追加CSS と 追加JavaScript」 で簡単に出来る
  • 他の人気テーマ からの乗り換え対応プラグイン配布( cocoon, ADDINGER, JIN, SANGO, STORK, THE THOR)
css.logo

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!

国内WordPressテーマ シェア率 No.1

Web制作案件にも使いやすい WordPress テーマ

SWELL

シンプルで多機能、そしてカスタマイズしやすい

ダッシュボードやカスタマイズ画面に沢山の設定が追加されていて、ノーコードでも相当なカスタマイズが可能。
追加CSS、追加JavaScript をページ毎に入力欄があるので、細部までこだわったサイト制作が可能。

買い切り型で、複数サイトに使用可能、Web制作案件にも

一度購入すれば、いくつのサイトに使用してもOK。フリーランスのWeb制作案件にも使えます。
メンバー登録すればテーマ更新も無償。

  • 一度買えば、月額料金はなし
  • 複数サイトで使用可能
  • ノーコードでも調整できる設定が、ダッシュボードやカスタマイズ画面に大量追加
  • ブロックエディタの豊富な追加ブロックで投稿がリッチに
  • 細部の調整が、「追加CSS と 追加JavaScript」 で簡単に出来る
  • 他の人気テーマ からの乗り換え対応プラグイン配布( cocoon, ADDINGER, JIN, SANGO, STORK, THE THOR)

この記事を書いた人

bobuのアバター bobu Webクリエイター

ホームページ制作、リメイク、バナー、画像制作を行っています。
毎朝5:00-7:00 まで朝活で ITの知識を インプット+ Twitter へアウトプット。
お仕事のご依頼は「お問い合わせページ」からご連絡ください。

目次