auto margin
Flexboxでは margin: auto が通常のブロック要素とは異なる特殊な動作をします。
この強力な機能を使うことで、justify-content や align-items では実現できない柔軟なレイアウトを作ることができます。
基本概念
Flexboxにおける margin: auto は、余剰スペースを自動的に"消費"します。
実際に例を見てみましょう。
水平方向の margin: auto
主軸上ではアイテムは一つのグループとして扱われるため、justify-items プロパティや justify-self プロパティは存在しません。
その代わり、margin: auto を使用してアイテムを柔軟に配置することができます。
要素を右端に配置
CSS
.flex-container {
display: flex;
}
.item {
margin-left: auto; /* 要素を右端に押し出す */
}
左端の要素
margin-left: auto
要素を中央に配置
CSS
.item {
margin-left: auto;
margin-right: auto; /* 中央に配置 */
}
左端
中央
右端
垂直方向の margin: auto
margin: autoは垂直方向にも働きます。
要素を下端に配置
CSS
.flex-container {
height: 150px;
align-items: flex-start;
}
.item {
margin-top: auto; /* 下端に配置 */
}
通常の位置
margin-top: auto
通常の位置
垂直中央配置
CSS
.item {
margin-top: auto;
margin-bottom: auto; /* 垂直中央に配置 */
}
上端
中央
上端
水平・垂直の組み合わせ
完全な中央配置
CSS
.item {
margin: auto; /* 水平・垂直両方向で中央配置 */
}
通常のアイテム
margin: auto
通常のアイテム
margin: auto の優先順位
margin: auto は justify-content や align-items よりも常に優先されます。
CSS
.flex-container {
justify-content: flex-start;
align-items: flex-start;
}
.special-item {
margin: auto; /* justify-content と align-items を無視 */
}
justify-content: flex-start, align-items: flex-start
通常
margin: auto で中央
通常
justify-content: center, align-items: center
中央
margin-left: auto で右へ
中央
ヒント
Flexboxのプロパティで実現できない場合にmargin: autoを使うようにするとよいでしょう。
実用的なレイアウトパターン
ナビゲーションメニュー
CSS
.navbar {
display: flex;
align-items: center;
padding: 10px 20px;
}
.nav-links {
display: flex;
gap: 20px;
}
.user-menu {
margin-left: auto; /* ユーザーメニューを右端に */
}
商品カード
CSS
.product-card {
display: flex;
align-items: center;
padding: 20px;
}
.product-info {
flex: 1;
}
.product-price {
margin-left: auto; /* 価格を右端に */
font-weight: bold;
color: #007bff;
}
商品名
商品の説明文がここに入ります
¥1,980
フッターレイアウト
CSS
.footer {
display: flex;
align-items: center;
padding: 20px;
gap: 20px;
}
.copyright {
margin-left: auto; /* コピーライトを右端に */
font-size: 14px;
color: #666;
}