[解決済み] フレックスアイテムを右寄せにするには?
2022-03-17 23:50:54
質問
連絡先を右寄せにする方法として、フレックスボックス的な方法はありますか?
position: absolute
?
.main {
display: flex;
}
.a,
.b,
.c {
background: #efefef;
border: 1px solid #999;
}
.b {
flex: 1;
text-align: center;
}
.c {
position: absolute;
right: 0;
}
<h2>With title</h2>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<div class="b"><a href="#">Some title centered</a></div>
<div class="c"><a href="#">Contact</a></div>
</div>
<h2>Without title</h2>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<!--<div class="b"><a href="#">Some title centered</a></div>-->
<div class="c"><a href="#">Contact</a></div>
</div>
解決方法は?
より柔軟なアプローチとして
auto
左マージン(フレックスアイテム扱い
自動マージン
は、ブロックフォーマットコンテキストで使用される場合とは少し異なります)。
.c {
margin-left: auto;
}
フィドルを更新しました。
.main { display: flex; }
.a, .b, .c { background: #efefef; border: 1px solid #999; }
.b { flex: 1; text-align: center; }
.c {margin-left: auto;}
<h2>With title</h2>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<div class="b"><a href="#">Some title centered</a></div>
<div class="c"><a href="#">Contact</a></div>
</div>
<h2>Without title</h2>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<!--<div class="b"><a href="#">Some title centered</a></div>-->
<div class="c"><a href="#">Contact</a></div>
</div>
<h1>Problem</h1>
<p>Is there a more flexbox-ish way to right align "Contact" than to use position absolute?</p>
関連
-
[解決済み] textareaのresizableプロパティを無効にするにはどうしたらよいですか?
-
[解決済み] Bootstrap 3.3.7で改行する方法
-
[解決済み] HTMLのテーブルからボーダーを完全に削除する方法
-
[解決済み] 要素を水平方向にセンタリングする方法
-
[解決済み] 画像の横のテキストを縦に揃える?
-
[解決済み] チェックボックスとそのラベルをクロスブラウザーで一貫して揃える方法
-
[解決済み] divの中のテキストを縦に揃えるにはどうしたらいいですか?
-
[解決済み] CSS Flexboxで、"justify-items "と "justify-self "プロパティはなぜないのですか?
-
[解決済み] フレックスアイテムを右寄せにするには?
-
[解決済み】jQueryでチェックボックスがチェックされているかどうかを確認するにはどうすればよいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
ローカルリソースのロードが許可されていない問題を解決する
-
[解決済み] BootstrapのCollapse Navbarが動作しない
-
[解決済み] ジャンボトロンのセンター出しは?
-
[解決済み] CSSでcellpaddingとcellspacingを設定する?
-
[解決済み] セレクトボックスのプレースホルダーを作成するにはどうすればよいですか?
-
[解決済み] HTMLページからのリダイレクト
-
[解決済み] CSSでdivのアスペクト比を維持する
-
[解決済み] HTML5でfloat入力タイプはありますか?
-
[解決済み] Do I use <img>, <object>, or <embed> for SVG files?
-
[解決済み] localStorage、sessionStorage、session、cookieの違いは何ですか?