box-alignプロパティの説明
CSSの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;
}
子要素A
子要素B
子要素C
子要素A
子要素B
子要素C
子要素A
子要素B
子要素C
子要素A
子要素B
子要素C
子要素A
子要素B
子要素C