ATOZ CSSクイックヒント：テキストを正当化し、FlexBoxを使用します

この記事は、ATOZ CSSシリーズの一部です。このシリーズの他のエントリをここで見つけることができます。こちらのテキストアライメントに関するフル画面の録音と手順を参照してください。

ATOZ CSSシリーズへようこそ！このシリーズでは、アルファベットの異なる文字から始まるさまざまなCSS値（およびプロパティ）を探ります。画面の録音だけでは不十分な場合があることがわかっているため、この記事では、テキストアライメントに関する新しいヒント/コースを追加しました。

jはテキストアライメントを表します

テキストアラインメントについてこれ以上言うことはないので、この記事ではFlexBoxの世界に迂回し、コンテンツの整列方法を見てみましょう。 j文字の画面録音では、text-alignプロパティと、それを使用してページにテキストを合わせる方法について説明します。これについてこれ以上言うことは何もないので、FlexBoxに飛び込みましょう！ FlexBoxには、弾力性容器内の要素を見つけることができるjustify-contentプロパティがあります。このプロパティの各値は、ブラウザが親コンテナの主軸に沿って弾性アイテムの間にスペースを割り当てる方法を定義します。 justify-content 5つの異なる値があります：

• flex-start（デフォルト）：アイテムは、含有要素の先頭に配置されます
• flex-end：アイテムは含む要素の最後にあります
• center：アイテムは、含まれている要素
内にあります
• space-between：アイテムは、含まれる要素の幅全体に均等に分布しています。
• ：プロジェクトは均等に分散されており、プロジェクトの周りに等しい間隔があり、最初と終わりがあります。この例をチェックして、space-aroundプロパティの値を変更するときに異なる結果について学びます。 justify-contentCODEPENの例を表示

CSSテキストアラインメント（FAQ）に関するよくある質問

と

の違いは何ですか？ justify-content: space-between space-around CSSでは、

プロパティを使用して、弾性容器内の水平線に沿ってアイテムを調整します。このプロパティの

値とjustify-content値は異なる動作をします。 space-betweenを使用すると、ブラウザは弾性アイテムの間にスペースを均等に配布しますが、周囲では均等に分配されます。これは、最初のアイテムがラインの先頭にあり、最後のアイテムが行の終わりにあることを意味します。一方、space-aroundを使用すると、ブラウザは弾性プロジェクトの周りのスペースを均等に配布します。これは、最初と最後のプロジェクトの両側にスペースがあることを意味します。これは、プロジェクト間のスペースの半分のサイズです。 space-between

cssjustify-content: space-evenlyはどのように機能しますか？

cssのjustify-contentspace-evenly属性の値の属性の値は、弾性アイテムの間および周囲のスペースを均等に分配するために使用されます。これは、任意の2つのプロジェクトと極端な場所のスペースの間のスペースが同じであることを意味します。これは、アイテムの数やサイズに関係なく、プロセス全体に等しい間隔を保持したい場合に最適です。

justify-content

を使用してCSSでグリッドレイアウトを使用できますか？

justify-contentはい、CSSグリッドレイアウトで

属性を使用できます。 FlexBoxで同様に機能し、行軸に沿ってグリッドアイテムを調整します。ただし、グリッドコンテナに余分なスペースがある場合にのみ有効です（つまり、グリッドアイテムの合計サイズがグリッドコンテナのサイズよりも小さい場合）。

cssのjustify-contentのデフォルト値は何ですか？

injustify-contentinflex-startの属性のデフォルト値はjustify-contentです。つまり、

の値を指定しない場合、ブラウザは弾性アイテムを弾性容器の先頭に並べることを意味します。

justify-contentin css

左から左への言語を操作する方法は？

CSSのjustify-contentを使用する場合、アイテムは、RTL言語のコンテナの先頭、つまり右側に並べられます。 justify-content: flex-end

CSSで

でパーセンテージを使用できますか？ justify-content

いいえ、CSSで

属性を持つパーセンテージを使用することはできません。 justify-content、flex-start、flex-end、center、space-between、space-around、space-evenly、

などの特定のキーワードのみを受け入れます。

justify-contentin csswrap

で作業する方法は？

wrap弾性容器に値flex-wrapを使用してjustify-content属性を使用する場合、弾性アイテムは複数の行に包むことができます。この場合、各行の属性は各行のアイテムを個別に調整します。

justify-content

を使用してアイテムを垂直および水平に中心に使用できますか？

justify-content: centerはい、CSSを使用してアイテムを垂直および水平に中央に集めることができます。水平センタリングにはalign-items: centerを使用し、垂直センタリングには

を使用できます。ただし、これらのプロパティは弾性容器でのみ有効です。

とalign-itemsの違いは何ですか？ justify-content CSSでは、

と

の両方が弾性容器のアイテムを整列するために使用されますが、異なる軸に沿って動作します。 align-itemsプロパティは、水平軸（またはスピンドル）に沿ってアイテムを並べ、justify-contentプロパティは垂直軸（または交差軸）に沿ってアイテムを調整します。 justify-content align-items

with

with cssを使用できますか？ justify-content inline-flexはい、

属性をCSSで使用できます。インラインの弾性容器の紡錘に沿って弾性アイテムを整列させるのと同じように機能します。

justify-content文脈に基づいていくつかのステートメントを書き直し、段落を再編成して、記事をよりスムーズで自然にし、複製を避けることに注意してください。 さらに、画像の実際のコンテンツにアクセスできないため、画像の元の形式と場所のみを保持することはできますが、画像の説明の正確性を保証することはできません。 より正確な擬似オリジナリティが必要な場合は、写真の特定のコンテンツを提供してください。 inline-flex

以上がATOZ CSSクイックヒント：テキストを正当化し、FlexBoxを使用しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。