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

フレックスボックスを使用したフレックス項目の右揃え

フレックスボックスを使用する場合、position:Absolute を使用せずに項目を右揃えにできます。フレックスボックスのちょっとした工夫。このシナリオでは、3 つの div を含む div があり、「Contact」を右揃えにする必要があります。

元のアプローチ: 絶対位置を使用する

最初は、 「Contact」div は絶対的に配置され、right: 0; を使用してコンテナーの右端に配置されました。財産。この方法は機能しますが、レイアウトの柔軟性を重視するフレックスボックスの精神に反します。

よりフレックスボックス中心のソリューション: 自動左マージン

よりフレックスボックス-準拠するアプローチには、自動左マージンの使用が含まれます。ブロック書式設定コンテキストとは異なり、フレックス項目は自動マージンを異なる方法で処理するため、正確な位置合わせが可能になります。 "Contact" div の margin-left プロパティを auto に設定すると、ブラウザーは項目をコンテナーの右端に押し込むようにマージンを自動的に調整します。

コード スニペット:

.c {
  margin-left: auto;
}

更新されたフィドル:

[フレックスボックス]マージン左揃えのデモ](https://jsfiddle.net/vqDK9/1/)

この方法では、フレックスボックスの原則を遵守し、レイアウトの柔軟性を維持しながら、適切な右揃えが保証されます。

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