auto;も、よく使用していると思います。使用し、なんとなく知っているけれど、本当は理解できていないことがあるかもしれません。auto;の自動マージンがどのように相互作用するかを紹介します。ヘッダやナビゲーションなど、微調整が必要なレイアウトに役立つテクニックです。margins下記は各ポイントを意訳したものです。※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。auto;しっかりと理解しておくフロントエンドの制作をしていると、知らないことが何なのかを分かっていることがあります。必要とするCSSは十分知っているので、それをどのように使うのか、正しい構文が何であるかは意識しないでしょう。頭の中には空の引き出しがあり、その何かを調べようとすると、私が見つけるのは判読不可能な付箋ばかりです。使用し、なんとなく知っているけれど、本当は理解できていないことがあるかもしれません。auto;の自動マージンがどのように相互作用するかを取り上げます。auto;下記の例を考えてみましょう。together」を思い出しました。その時は記事のコンセプトを理解することができず、デモをクリックすることさえしませんでした。auto;がFlexアイテムにどのように影響するかを説明しています。Flexアイテムに自動マージンを適用すると、そのマージンは適用される方向に応じて、Flexコンテナ内の余分なスペースを占有するように自動的に拡張されます。いうことなのか、シンプルなコードで検証してみます。子のdiv要素が1つあるシンプルな親のdiv要素があるとします。class="child"></div></div>これらのdiv要素は、下記のCSSでスタイルされています。100px;}この時点での表示は、下記のようになります。auto;」を加えてみます。auto;」を加えると、下記のように表示されます。CodePen.なぜ?と思ったでしょう。これは子のdiv要素が右端にくるように、左方向のマージンが親のdiv要素を押しているからです。Edgeでも同様に機能します。auto;」にして、すべてのマージンをautoにするとどうなるでしょうか。auto;」にすると、下記のように表示されます。CodePen.そうです。これは人気が高い中央配置のテクニックの1つです。子要素が親要素に対して、左右と上下の中央に配置されます。同様に、margin-leftとmargin-topにautoに設定すると、Flexアイテムを親の右下に押し出すことができます。CodePen.これがどういう現象かというと、「FlexアイテムはFlexコンテナ内の余分なスペースを占有するために、自動的にマージンを拡張する」と解釈されています。Flexboxの子にmarginプロパティを設定すると、その方向から子を押し出します。margin-leftをautoにすると、子は右に移動します。margin-topをautoにすると、子は下に移動します。auto;の仕組みを理解することは、さまざまなレイアウトの実装に必要なことです。Flexboxのjustify-selfやalign-selfでは、あなたが望むものを得ることができない場合があります。auto;を使用すると、例えばナビゲーションのアイテムを整列させるメニューなどで、メニューの1つのアイテムを親要素の右端に配置したり、下端に配置したり、この仕組みが役立ちます。この奇妙な仕様は、覚えておくことが重要だと思います。