box-align:親要素内に含まれる子要素を揃える水平位置の基準を指定する
初期値 | ― |
適用対象 | ― |
継承 | ― |
アニメーション | ― |
対応ブラウザ | caniuseで確認 |
このプロパティは非推奨または廃止になりました。新しく作るウェブサイトへの使用は避けて下さい。また、既存のソースコードの中に含まれている場合は更新をお勧めします。詳しくは現行の標準仕様に従って下さい。
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プロパティ
非推奨または廃止されたプロパティ | |
---|---|
background-break | インライン要素の背景画像の繰り返し方法を指定する |
baseline-shift | 優先するベースラインを指定し直す |
bookmark-label | ブックマークのラベル(名前)を指定する |
bookmark-level | ブックマークのレベル(度合い)を指定する |
bookmark-target | ブックマークのターゲット(対象)を指定する |
border-break | ボックスが分割された場合のボーダーの表示方法を指定する |
box-align | 親要素内に含まれる子要素を揃える水平位置の基準を指定する |
box-direction | 親ボックス内に配置する子要素の表示方向を指定する |
ime-mode | テキスト入力時のIMEの状態を指定する |
marker-offset | リストマーカーとの間隔を指定する |
page-break-after | 印刷時の改ページ位置を、特定の要素直後に指定する |
page-break-before | 印刷時の改ページ位置を、特定の要素直前に指定する |
scrollbar-base-color | スクロールバーのベースになる色を指定する |
scrollbar-arrow-color | スクロールバーの矢印にあたる色を指定する |
scrollbar-face-color | スクロールバーの表面にあたる色を指定する |
scrollbar-3dlight-color | スクロールバーの左端と上端にあたる色を指定する |
scrollbar-highlight-color | スクロールバーのハイライトにあたる色を指定する |
scrollbar-shadow-color | スクロールバーの影にあたる色を指定する |
scrollbar-darkshadow-color | スクロールバーの右端と下端にあたる色を指定する |
text-autospace | アルファベット等との間隔を指定 |
zoom | 要素の表示倍率(拡大・縮小)を指定する |