CSS3のフレキシブルボックスで横組みレイアウト

display:box;を親要素に指定して、横組みレイアウトを実装する

※ IE9では非対応。

今までのCSSでのレイアウト

ソリッド(固定幅)レイアウト

子要素をfloat:left;で左寄せにして、擬似要素:afterで左寄せをリセットする、という遠まわしな書き方が必要。

BOX1
BOX1
BOX2
BOX2
BOX2
BOX3
BOX3

リキッド(可変幅)レイアウト

固定幅要素を絶対座標配置して、可変幅要素に対して他の固定幅要素分の余白幅を開ける、という遠まわしな書き方が必要。

高さは小要素ごとに異なるので、親要素を高さ指定して子要素にheight:100%;する。親要素が可変高さだとこの方法も効かないのでまた面倒に。

BOX1
BOX1
BOX2
BOX2
BOX2
BOX3
BOX3

display:box;をつかったレイアウト

ソリッド(固定幅)レイアウト

高さは親要素に自動で合う。

BOX1
BOX1
BOX2
BOX2
BOX2
BOX3
BOX3

リキッド(可変幅)レイアウト

可変要素に width:auto;とbox-flex:1;を指定するだけ。

BOX1
BOX1
BOX2
BOX2
BOX2
BOX3
BOX3

box-orient:vertical;でレイアウトの方向を変更

horizontal 横並び(初期値)

vertical 縦並び

inline-axis box-axis それぞれ、親要素、子要素の文字表示の方向に従う

BOX1
BOX1
BOX2
BOX2
BOX3
BOX3

box-direction:reverse;でボックスの並び順を変更

normal 通常方向(初期値)

reverse 逆方向

BOX1
BOX1
BOX2
BOX2
BOX3
BOX3

box-direction:reverse;でボックスの並び順を変更

normal 通常方向(初期値)

reverse 逆方向

BOX1
BOX1
BOX2
BOX2
BOX3
BOX3

box-ordinal-group:n;でボックスの並び順を個別に指定

1 (初期値)

nには整数値を入力する

BOX1
BOX1
BOX2
BOX2
BOX3
BOX3

box-align:end;でボックスを揃える位置を指定

stretch (初期値)

start要素の上辺に揃えて表示する

end 要素の下辺に揃えて表示する

center 要素は中央に揃えて表示する

baseline 最初の行のベースラインに揃えて表示する

BOX1
BOX1
BOX2
BOX2
BOX3
BOX3

box-flex:n;でボックスの余白を指定

n には割合の実数値を入力する

BOX1
BOX1
BOX2
BOX2
BOX3
BOX3

box-pack:end;でボックスを寄せる位置を指定

start (初期値)

end 子要素を右側に寄せる

center 子要素を中央に寄せる

justify 子要素を均一に寄せる

BOX1
BOX1
BOX2
BOX2
BOX3
BOX3

対応ブラウザ

GoogleChrome 11

Safiri 5

Firefox 3.6

Opera 11

view source

JavaScript


  
CSS

  
div.box_parent_old{
  height:120px;
}

div.box_parent_old div:nth-child(1){
  background-color:#eeeeee;
}
div.box_parent_old div:nth-child(2){
  background-color:#cccccc;
}
div.box_parent_old div:nth-child(3){
  background-color:#999999;
}




#container_solid_old:after{
  content:"";
  display:block;
  clear:both;
}
#container_solid_old div:nth-child(1){
  width:120px;
  height:100%;
  float:left;
}
#container_solid_old div:nth-child(2){
  width:360px;
  height:100%;
  float:left;
}
#container_solid_old div:nth-child(3){
  width:60px;
  height:100%;
  float:left;
}




#container_liquid_old{
  position:relative;
  left:0px;
  top:0px;
}
#container_liquid_old div:nth-child(1){
  position:absolute;
  left:0px;
  top:0px;
  width:120px;
  height:100%;
}
#container_liquid_old div:nth-child(2){
  margin-left:120px;
  margin-right:80px;
  height:100%;
}
#container_liquid_old div:nth-child(3){
  position:absolute;
  right:0px;
  top:0px;
  width:80px;
  height:100%;
}



#container_liquid{
}

#container_liquid div:nth-child(2){
  width:auto;
  -webkit-box-flex:1;
  -moz-box-flex:1;
  box-flex:1;
}

div.box_parent{
  margin:10px;
  height:120px;
  display:-webkit-box;
  display:-moz-box;
  display:box;
}
div.box_parent div:nth-child(1){
  background-color:#eeeeee;
  width:120px;
}
div.box_parent div:nth-child(2){
  background-color:#cccccc;
  width:360px;
}
div.box_parent div:nth-child(3){
  background-color:#999999;
  width:80px;
}

#container_orient{
  -webkit-box-orient:vertical;
  -moz-box-orient:vertical;
  box-orient:vertical;
}

#container_direction{
  -webkit-box-direction:reverse;
  -moz-box-direction:reverse;
  box-direction:reverse;
}
#container_ordinal_group {
}

#container_ordinal_group div:nth-child(1){
  -webkit-box-ordinal-group:2;
  -moz-box-ordinal-group:2;
  box-ordinal-group:2;
}
#container_ordinal_group div:nth-child(2){
  -webkit-box-ordinal-group:1;
  -moz-box-ordinal-group:1;
  box-ordinal-group:1;
}
#container_ordinal_group div:nth-child(3){
  -webkit-box-ordinal-group:3;
  -moz-box-ordinal-group:3;
  box-ordinal-group:3;
}



#container_align {
  -webkit-box-align:end;
  -moz-box-align:end;
  box-align:end;
}
#container_align div:nth-child(1){
  height:80px;
}
#container_align div:nth-child(2){
  height:120px;
}



#container_flex div:nth-child(2) {
  -webkit-box-flex: 2.0;
  -moz-box-flex: 2.0;
  box-flex: 2.0;
}

#container_flex div:nth-child(3) {
  -webkit-box-flex: 1.0;
  -moz-box-flex: 1.0;
  box-flex: 1.0;
}




#container_pack {
  -webkit-box-pack:end;
  -moz-box-pack:end;
  box-pack:end;
}

  
HTML

  

    
ページのソースを表示 : Ctrl+U , DevTools : F12

    
view-source:https://hi0a.com/demo/-css/css3-flexible-box/

  

  
ABOUT

  

    
hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。

    
プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。

    
必要な機能の関数をコピペ利用したり勉強に活用できます。

    
プログラムの動作サンプル結果は画面上部に出力表示されています。

    
環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。

    
画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。

    
動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。

    
途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。