ウェブランサー

box-align - 親要素内に含まれる子要素を揃える水平位置の基準を指定する

取り扱い CSS3から追加された要素
適用可能 displayの値が box か inline-box の要素
継承 しない(親要素に指定すると子要素に作用する)
対応ブラウザ box-alignの対応状況を確認する

box-alignプロパティの説明

box-alignは、親要素内に含まれる子要素を揃える水平位置の基準を指定するために使用します。例えば、親要素であるコンテナボックスの高さが、子要素のアイテムの高さよりも大きい場合に余白が生まれます。その際に、子要素がどの位置を基準にレイアウトされるのかを決定する時に役立ちます。box-alignはCSS3で追加されたプロパティです。

box-alignは親要素のコンテナに対して指定します。box-alignが指定されているコンテナに格納されている子要素は、この指定に従う形でレイアウトされます。また、このプロパティを指定する要素は、displayの値に[box]か[inline-box]を指定してください。

box-alignに与えられる値

start
親要素の開始位置に従う。通常、子要素の上辺がコンテナボックスの上部に揃えらる
end
親要素の終了位置に従う。通常、子要素の底辺がコンテナボックスの下部に揃えらる
center
子要素の前後に余ったスペースが均等に分割され、コンテナボックス内の子要素がセンタリングされる
baseline
box-orientの値が、inline-axisかhorizontalの場合に、全ての子要素はそれらのベースラインに揃う形で配置される。余ったスペースは必要に応じて前後に配置される
stretch
子要素の高さがコンテナボックスの高さに引き伸ばされる(初期値)

box-alignの使用サンプル

box-alignは、正式に採用していないブラウザが存在するため、ベンダープレフィックスを指定することを推奨します。

CSS
.container_sample {
 height:50px;
 margin-bottom: 10px;
 background-color: #CCCCCC;
}
.container_sample:first-child{
 background-color: #FF0000;
 }
.container_sample:nth-child(2){
 background-color: #00FF00;
}
.container_sample:last-child{
 background-color: #0000FF;
}
.box_start {
 display: box;
  display: -moz-box;
  display: -webkit-box;
  display: -o-box;
  display: -ms-box;
 box-align: start;
  -moz-box-align: start;
  -webkit-box-align: start;
  -o-box-align: start;
  -ms-box-align: start;
}
.box_end {
 display: box;
  display: -moz-box;
  display: -webkit-box;
  display: -o-box;
  display: -ms-box;
 box-align: end;
  -moz-box-align: end;
  -webkit-box-align: end;
  -o-box-align: end;
  -ms-box-align: end;
}
.box_center {
 display: box;
  display: -moz-box;
  display: -webkit-box;
  display: -o-box;
  display: -ms-box;
 box-align: center;
  -moz-box-align: center;
  -webkit-box-align: center;
  -o-box-align: center;
  -ms-box-align: center;
}
.box_baseline {
 display: box;
  display: -moz-box;
  display: -webkit-box;
  display: -o-box;
  display: -ms-box;
 box-align: baseline;
  -moz-box-align: baseline;
  -webkit-box-align: baseline;
  -o-box-align: baseline;
  -ms-box-align: baseline;
}
.box_stretch {
 display: box;
  display: -moz-box;
  display: -webkit-box;
  display: -o-box;
  display: -ms-box;
 box-align: stretch;
  -moz-box-align: stretch;
  -webkit-box-align: stretch;
  -o-box-align: stretch;
  -ms-box-align: stretch;
}
表示確認
 子要素A 
 子要素B 
 子要素C 
 子要素A 
 子要素B 
 子要素C 
 子要素A 
 子要素B 
 子要素C 
 子要素A 
 子要素B 
 子要素C 
 子要素A 
 子要素B 
 子要素C 

box-alignに関連するCSSプロパティ