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

.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;
}