「position:Absolute」を使用せずにフレックス項目を右揃えにするにはどうすればよいですか?

右揃えのフレックスボックスの代替案

フレックスボックス レイアウトでは、フレックス項目を右揃えにする必要がある場合があります。 Position:Absolute を使用する一般的なアプローチは、制限がかかる可能性があります。この記事では、より適切なフレックスボックス ソリューションについて説明します。

最初のコードは、「連絡先」フレックス項目を揃えるために、position:Absolute を使用する方法を示しています。

.c {
    position: absolute;
    right: 0;
}

ただし、よりフレックスボックス指向のこのアプローチでは、左マージンの自動設定を利用します。フレックス項目は、ブロック書式設定コンテキストとは異なる方法で自動マージンを処理します。左マージンを自動に設定すると、フレックス項目は利用可能なスペースを埋めるように拡張され、自動的に右側に配置されます。

.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;
}

<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>

このソリューションはフレックスボックスの哲学に準拠しており、目的の右揃えレイアウトを実現するためのよりクリーンで柔軟な方法を提供します。

以上が「position:Absolute」を使用せずにフレックス項目を右揃えにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。