auto;も、CSSでよく使うプロパティです。auto;)を組み合わせると、さまざまなレイアウト・配置ができます。ナビゲーションのアイテムを配置する際に、ロゴだけ左端に、検索を右端に、といった配置もオートマージンが活躍します。Flexboxとオートマージンの効果的な使い方を紹介します。Ming下記は各ポイントを意訳したものです。※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。align-selfプロパティ」で学んだと思います。次に疑問に思うのは「メイン軸でもそれができますか?」ではないでしょうか。使用できる既存のプロパティがあります。オートマージンを使用すると、特定要素の水平方向の位置合わせをコントロールすることができます。オートマージンで水平方向の位置合わせしかも、オートマージンは垂直方向の配置もコントロールすることができます。オートマージンで垂直方向の位置合わせ水平と垂直を合わせると、特定要素を中央配置もできます!オートマージンで中央配置マージンについて理解するこの時点で少し混乱しているかもしれません。margin-leftは要素を右に自動的にプッシュするのでしょうか。margin-rightは左にプッシュするのでしょうか。直感に反しているように感じるかもしれませんが、心配しないでください。私も最初はそうでした😅マージンとは、要素にスペースを追加するプロパティです。50px;を定義すると、要素の左側に50pxのスペースが追加されます。これは言い換えると、要素を50px右にプッシュするのと同じことです。auto;を定義すると、autoは使用可能なスペースを計算し、要素の左側のスペース量を算出します。これにより、要素を右いっぱいにプッシュします。要素を中央にプッシュオートマージンが常に優先されるオートマージンは常に優先されます、記述の順番も関係ありません。Flexboxのプロパティなぜ効果がないのか空きスペースがオートマージンによって分配される場合、Flexした後に残ったスペースはすべてマージンに取られるため、Flexboxの配置に関するプロパティはその配置に影響を与えません。デベロッパー以外の言葉で言えば、オートマージンとはあなたが親切にもあなたの家に泊まるように招待した無知な友人のことで、彼らは家全体を自分のものと考え、すべてのスペースを占拠するようなものです。そんな友達はいませんよね😂オートマージンの効果的な使い方オートマージンの効果的な使い方をいくつか紹介します。オートマージンの効果的な使い方このようにオートマージンを使用すると、ナビーゲションのアイテムも思い通りに配置できます。選択の基本的な指針は、下記の通りです。Flexboxのプロパティは常に使用する。Flexboxのプロパティで配置が不可能な場合に、オートマージンを使用する。その理由は、Flexboxのプロパティはオートマージンよりも直感的で分かりやすいからです。下記のコードを見てみてください。auto;}Flexboxの知識がなくても、コードを読むだけで.childを最後に整列させているのが分かると思います。auto;だと、どのように配置されるかコードからは分からないかもしれません。これは私の個人的なお勧めです。使用するプロジェクトやチームで適した方法を自由に選択できます。