CSS3を勉強したい

CSS3Cascading Style Sheets

margin を使ってflexアイテムを寄せる

margin-left: auto;の場合は、左の余白(margin-left)を、自動的に算出(auto)する、ということです。左側の余白を自動的に算出、つまり対象のボックスが右に寄り、できた左側の余白の算出を自動でします。

適用方法は、対象のflexアイテムにmargin-left: auto;を指定します。

ここでは、並んだflexアイテムの内、一番右(もしくは一番左)のアイテムだけを右端(もしくは左端)に寄せる場合を説明しています。

アイテムが寄ると逆側に余白ができまが、アイテムにmargin-left: auto;(もしくはmargin-right: auto;)を指定しておけば、寄ることでできる余白の幅を自動で算出してレイアウトしてくれます。

余白を指定するmargin-left: auto;margin-right: auto;で、flexアイテムを寄せるということです。

margin-left でflexアイテムを右に寄せる

margin-left: auto;を指定して、ナビゲーションの最後の項目だけを右に寄せます。

HTML側で、寄せたいflexアイテムにクラス名とつけておいて、そのクラスにmargin-left: auto;を指定します。

HTML
    
<ul>
    <li>ホーム</li>
    <li>会社概要</li>
    <li>商品</li>
    <li class="contact">問い合わせ</li>
</ul>
CSS
    
ul {
    display: flex;
    background-color: #555;
    color: #fff;
}
.contact {
    margin-left: auto;
}
li {
    padding: 0 10px;
}

上のコードの結果が下です。

  • ホーム
  • 会社概要
  • 商品
  • 問い合わせ

margin-right でflexアイテムを左に寄せる

margin-right: auto;を指定して、ナビゲーションの最初の項目だけを左に寄せます。

寄せたいflexアイテムにクラス名とつけて、margin-right: auto;を指定します。

HTML
    
<ul>
    <li class="home">ホーム</li>
    <li>会社概要</li>
    <li>商品</li>
    <li>問い合わせ</li>
</ul>
CSS
    
ul {
    display: flex;
    background-color: #555;
    color: #fff;
}
.home {
    margin-right: auto;
}
li {
    padding: 0 10px;
}

上のコードの結果が下です。

  • ホーム
  • 会社概要
  • 商品
  • 問い合わせ

margin-top を使ってflexアイテムを下に寄せる

margin-left: auto;と合わせてmargin-top: auto;を指定して、flexアイテムを右下に寄せます。

HTML
    
<div class="spaces">
    <p>右下に寄ります</p>
</div>
CSS
    
.spaces {
    display: flex;
    background-color: #555;
    height: 100px;
}
.spaces p {
    margin-left: auto;
    margin-top: auto;
    color: #fff;
}

上のコードの結果が下です。

右下に寄ります