非標準
この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

警告: このプロパティは、当初の CSS Flexible Box Layout Module の草案段階のものでしたが、既により新しい標準のものが取って変わっています。

box-align は、交差軸方向に子要素をどう整列させるかを定義するCSSプロパティです。ボックス内に余分なスペースがある場合にかぎり、その効果を確認することができます。

現在の標準仕様に関する情報については、フレックスボックスを確認してください。

/* キーワード値 */
box-align: start;
box-align: center;
box-align: end;
box-align: baseline;
box-align: stretch;

/* グローバル値 */
box-lines: inherit;
box-lines: initial;
box-lines: unset;

配置する方向は、その要素の向き (水平か垂直か) に依存します。

初期値stretch
適用対象elements with a CSS display value of box or inline-box
継承なし
メディア視覚
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

構文

box-align プロパティは、 以下に記載する値で定義されます。

start
ボックス内のコンテンツを先頭に寄せて、末尾に余分なスペースを残します。
center
ボックス内のコンテンツを中央に寄せて、余分なスペースを等分に分割し始端と終端に残します。
end
ボックス内のコンテンツを末尾に寄せて、先頭に余分なスペースを残します。
baseline
ボックス内のコンテンツが持つテキストのベースラインに整列させます。これはボックス内のコンテンツの向きが水平である場合にのみ適用されます。
stretch
ボックス内に余分なスペースがなくなるようコンテンツを引き伸ばします。

形式文法

start | center | end | baseline | stretch

<!DOCTYPE html>
<html>
<head>
<title>CSS box-align example</title>
<style>
div.example {
  display: box;                   /* 仕様書通り */
  display: -moz-box;              /* Mozilla */
  display: -webkit-box;           /* WebKit */
	
  /* ボックスの高さを子要素より高くし、
     box-pack のためのスペースを確保する */
  height: 400px;
	
  /* ボックスの幅を子要素より広くし、
     box-align のためのスペースを確保する */
  width: 300px;

  /* 子要素の向きは垂直方向にする */
  box-orient: vertical;           /* 仕様書通り */
  -moz-box-orient: vertical;      /* Mozilla */
  -webkit-box-orient: vertical;   /* WebKit */

  /* 子要素をボックス内の水平方向に対して中央に整列させる */
  box-align: center;              /* 仕様書通り */
  -moz-box-align: center;         /* Mozilla */
  -webkit-box-align: center;      /* WebKit */
	
  /* 子要素をボックス内の終端に寄せる */
  box-pack: end;                  /* 仕様書通り */
  -moz-box-pack: end;             /* Mozilla */
  -webkit-box-pack: end;          /* WebKit */
}

div.example > p {            
  /* 子要素を親要素の幅より狭くし、
  box-align のためのスペースを確保する */ 
  width: 200px;
}
</style>
</head>
<body>
  <div class="example">
    <p>I will be second from the bottom of div.example, centered horizontally.</p>
    <p>I will be on the bottom of div.example, centered horizontally.</p>
  </div>
</body>
</html>

メモ

配置の用途で start と定義されるボックスの辺は、ボックスの向きに依存します。

Horizontal top
Vertical left

start と反対方向の辺が end と定義されます。

その要素の align 属性を使って整列する方向を指定した場合、スタイルで指定した値は無視されます。

仕様書

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応 あり -webkit- あり -webkit-

49 -webkit-

48 -webkit- 1

あり -moz-

なし あり -webkit-

3 -webkit-

1.1 —? -khtml-

機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 あり -webkit- あり -webkit- あり -webkit- なし あり -webkit- ? ?

1. From version 48: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, FumiyaShibusawa
最終更新者: mfuji09,