CSS box-align属性

13863 ワード

box-alignプロパティの定義と使用法:フレキシブルボックスモデルオブジェクトのサブ要素の位置合わせを設定または取得します.兄弟属性box-packを表示すると、両者の効果はちょうど(逆)相補的です.box-alignの位置合わせはbox-orientの影響を受けます.デフォルトでは(box-orientがhorizontalに設定されている)startとendが示す効果は、上部の位置合わせと下部の位置合わせに等しい.box-orientがverticalに設定されている場合、startとendの効果は左揃えと右揃えに等しい.対応するスクリプトのプロパティはboxAlignです.構文:

box-align：start | end | center | baseline | stretch

値:stretch:フレキシブルボックスモデルオブジェクトのサブエレメント適応親エレメントサイズを設定します.start:フレキシブルボックスモデルオブジェクトのサブエレメントを開始位置から位置合わせするように設定します.center:フレキシブルボックスモデルオブジェクトのサブエレメントを中央揃えに設定します.end:フレキシブルボックスモデルオブジェクトのサブ要素を終了位置から位置合わせするように設定します.baseline:フレキシブルボックスモデルオブジェクトのサブエレメントベースラインの位置合わせを設定します.ブラウザのサポート:1.IE 9およびIE 9以下のブラウザではこの属性はサポートされていません.2.Operaブラウザではこの属性はサポートされていません.3.Opera、Safari、Chromeブラウザはこのプロパティをサポートします.4.IEブラウザを除き、一時的にそれぞれのブラウザの互換性書き方を使用する必要がある.継承:継承なし.コードの例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>    </title>
<style type="text/css"> 
h1{font:bold 20px/1.5 georgia, simsun, sans-serif;} 
.box, .box2 
{ 
  display:-webkit-box; 
  display:-moz-box; 
  display:-o-box; 
  display:-ms-box; 
  display:box; 
  margin:0; 
  padding:10px; 
  background:#000; 
  list-style:none; 
} 
.box 
{ 
  -webkit-box-orient:horizontal; 
  -moz-box-orient:horizontal; 
  -o-box-orient:horizontal; 
  -ms-box-orient:horizontal; 
  box-orient:horizontal; 
  width:260px; 
  height:100px; 
} 
.box2 
{ 
  -webkit-box-orient:vertical; 
  -moz-box-orient:vertical; 
  -o-box-orient:vertical; 
  -ms-box-orient:vertical; 
  box-orient:vertical; 
  width:100px; 
  height:260px; 
} 
#box, #box6 
{ 
  -webkit-box-align:start; 
  -moz-box-align:start; 
  -o-box-align:start; 
  -ms-box-align:start; 
  box-align:start; 
} 
#box2, #box7 
{ 
  -webkit-box-align:center; 
  -moz-box-align:center; 
  -o-box-align:center; 
  -ms-box-align:center; 
  box-align:center; 
} 
#box3, #box8 
{ 
  -webkit-box-align:end; 
  -moz-box-align:end; 
  -o-box-align:end; 
  -ms-box-align:end; 
  box-align:end; 
} 
#box4, #box9 
{ 
  -webkit-box-align:baseline; 
  -moz-box-align:baseline; 
  -o-box-align:baseline; 
  -ms-box-align:baseline; 
  box-align:baseline; 
} 
#box5, #box10 
{ 
  -webkit-box-align:stretch; 
  -moz-box-align:stretch; 
  -o-box-align:stretch; 
  -ms-box-align:stretch; 
  box-align:stretch; 
} 
.box li, .box2 li{padding:10px; } 
.box li:nth-child(1), .box2 li:nth-child(1){background:#666;} 
.box li:nth-child(2), .box2 li:nth-child(2){background:#999;} 
.box li:nth-child(3), .box2 li:nth-child(3){background:#ccc;} 
</style> 
</head> 
<body> 
<h1>                box-align:start;</h1> 
<ul id="box" class="box"> 
  <li>1</li> 
  <li>2</li> 
  <li>3</li> 
</ul> 
<h1>             box-align:center;</h1> 
<ul id="box2" class="box"> 
  <li>1</li> 
  <li>2</li> 
  <li>3</li> 
</ul> 
<h1>                box-align:end;</h1> 
<ul id="box3" class="box"> 
  <li>1</li> 
  <li>2</li> 
  <li>3</li> 
</ul> 
<h1>             box-align:baseline;</h1> 
<ul id="box4" class="box"> 
  <li>1</li> 
  <li>2</li> 
  <li>3</li> 
</ul> 
<h1>               box-align:stretch;</h1> 
<ul id="box5" class="box"> 
  <li>1</li> 
  <li>2</li> 
  <li>3</li> 
</ul> 
<h1>                box-align:start;</h1> 
<ul id="box" class="box2"> 
  <li>1</li> 
  <li>2</li> 
  <li>3</li> 
</ul> 
<h1>             box-align:center;</h1> 
<ul id="box2" class="box2"> 
  <li>1</li> 
  <li>2</li> 
  <li>3</li> 
</ul> 
<h1>                box-align:end;</h1> 
<ul id="box3" class="box2"> 
  <li>1</li> 
  <li>2</li> 
  <li>3</li> 
</ul> 
<h1>             box-align:baseline;</h1> 
<ul id="box4" class="box2"> 
  <li>1</li> 
  <li>2</li> 
  <li>3</li> 
</ul> 
<h1>               box-align:stretch;</h1> 
<ul id="box5" class="box2"> 
  <li>1</li> 
  <li>2</li> 
  <li>3</li> 
</ul> 
</body> 
</html>

原文の住所は次のとおりです.http://www.softwhy.com/forum.php?mod=viewthread&tid=1401
詳細については、次の項目を参照してください.http://www.softwhy.com/divcss/

CSSコントロールテーブルの表示効果は、あなたがまだ知らない方法があるかもしれません.

【jQuery】操作DOM方法まとめ