を超えてテキストアライメントを超えて：Flex vs. Text-Align

水平方向に要素を調整する能力は、Webデザインに重要です。ただし、疑問が発生します。「テキストアライグ」の代わりに「flex」と「justify-content」を使用することが適切なのはいつですか？ ]

"Flex"および "Justify-Content"は、Boxとブロックレベルの要素のレイアウトを管理するFlexBoxの領域内で動作します。一方、「Text-Align」は、テキストとインラインレベルの要素のアライメントに影響します。単一の要素、どちらのアプローチも同様の結果を達成します。ただし、複数の要素では、明確な違いが明らかになります。

次の例を考慮してください。 ディスプレイ：Flex; Justify-Content：Flex-end; } Parent-normal { テキストアライグ：右; }

このシナリオでは、両方の場合にボタンが右に正常に整列されています。ただし、余分なテキストを削除する場合：

素晴らしいボタン！

「フレックス」の例では、ボタンが伸びてスペース全体を埋め、一方で、 「テキストアライグ」バージョンでは、元の位置のままです。 - モーダルのフッターをバージョン3と4の間のフッターに合わせるための「Flex」を整列します。このシフトは、複数の要素と変数コンテンツ幅を含むシナリオを処理できる信頼性の高い柔軟なレイアウトシステムの必要性によって駆動されました。

[

結論

.parent-flex {
  display: flex;
  justify-content: flex-end;
}
.parent-normal {
  text-align: right;
}

some text here Awesome button!

some text here Awesome button!

。