• css3

    フレキシブル・ボックスレイアウト

    2012/09/06

    CSS3でボックスレイアウト。

    box6-1.png

    段組みレイアウトでは、ひとつの要素内でカラムレイアウトをしましたが、

    フレキシブル・ボックスレイアウトでは、複数の要素のカラムレイアウトができます。

    もちろんtableやfloatを使わずにね!(キリッ

     

     

    書き方

    
    display: -webkit-box;
    
    

     

    これを並べたい要素の親要素に指定します。

     

    <div id="contents">
      <div id="box01">ボックス1</div>
      <div id="box02">ボックス2</div>
      <div id="box03">ボックス3</div>
    </div>

     

    
    #contents{
      display:-webkit-box;
    }
    
    

     

    box.png

     

    この一行を親に書くと、子要素(ブロックレベル要素)は左から順に並びます。

    ※わかりやすいようにwidth:100px、背景色を指定しました。

     

    これを縦に(上から下へ)並べる時は以下を追加します。

     

    
    #contents{
      display: -webkit-box;
      -webkit-box-orient: vertical;
    }
    
    

     

    box2.png

    デフォルトは横並び(左から右へ)ですが、横並び指定は

    
    -webkit-box-orient: horizontal;
    
    

    となります。


    逆方向から並べる

     

    左から右、上から下を逆方向から並べたい場合は以下を追加します。

    
    -webkit-box-direction: reverse;
    
    

     

    box4.png

     

    box3.png

     

    ほら!逆向きに!


    個別に並ぶ順番を指定

     

    その要素が、どの表示グループに属するかを指定することで、並び順を個別に変えることができます。
    グループは1以上の整数を指定し、値の小さいグループから順に並びます。
    グループの初期値は1なので、指定されていない要素のグループは1となります。

     

    とか言うとなんだか難しい感じがしますが、実際にやってみるとわかります!

     

     

    
    #box01{
      -webkit-box-ordinal-group: 2;
    }
    #box02{
      -webkit-box-ordinal-group: 1;
    }
    #box03{
      -webkit-box-ordinal-group: 2;
    }
    
    

     

    box5.png

     

    ボックス1とボックス3をグループ2に、ボックス2をグループ1に指定しました。

    よって、一番左はボックス2、同じグループのボックス1とボックス3は、HTMLの記述順に並んで表示されました。


    ボックスを上・中央・下・左・右に揃える

     

    display:boxで並べられている子要素は、すべて親要素と同じ高さになって表示されます。

    例えば親要素にheight:100pxを指定すると

     

    box6-1.png

     

    子要素には高さを指定していないにもかかわらず、同じく100pxの高さで表示されます。

     

    box-alignプロパティを指定すると、子要素は本来の高さを取り戻します。

     

    
    -webkit-box-align: end;
    
    

     

    これは親ボックスの下辺に揃える という指定になります。

     

    box7-1.png

    ※わかりやすいように親要素の背景色を黒にしました。

     

    この場合、子要素は下揃え、かつ、本来の高さに戻りました。

     

    ●指定の仕方

      親要素の上辺揃え(縦並びの場合左揃え) start
      親要素の下辺揃え(縦並びの場合は右揃え) end
      親要素に対して中央揃え(縦並びの場合も中央揃え) center
      親ボックスと同じ高さ(縦並びの場合幅) stretch ※初期値

     

    同様に、親要素の幅に満たない子要素を左・右・中央に揃える指定もあります。

     

    
    -webkit-box-pack: center;
    
    

     

    この場合、このように中央に寄せて表示されます。

     

    box8-1.png

    ※指定の値は、box-alignと同じです。

     


    各ボックスに割り当てる幅の比率

     

    display:boxで並べられている子要素の幅の合計値が親要素の幅にみたいない場合、

    その余白文を子要素の幅に分配することができます。

    これは、子要素が横並びの場合は幅に、縦並びの場合は高さに影響します。

     

    このように設定してみました。

     

    box9-1.png

    
    #contents{
      display: -webkit-box;
      width: 500px;
      height: 100px;
      background: #000;
    }
    #box01{
      width: 100px;
      background: #0FC;
    }
    #box02{
      width: 100px;
      background: #F60;
    }
    #box03{
      width: 100px;
      background: #FF0;
    }
    
    

     

    親要素の幅を500px、子要素3つを100pxに指定したので、余白が200pxできました。

    配分の書きかたは以下になります。

    
    -webkit-box-flex: 比率;
    
    

     

    ※比率の初期値は0.0になります。

     

    このように指定してみました。

    
    #box01{
      width: 100px;
      -webkit-box-flex: 2.0;
      background: #0FC;
    }
    #box02{
      width: 100px;
      -webkit-box-flex: 5.0;
      background: #F60;
    }
    #box03{
      -webkit-box-flex: 3.0;
      width: 100px;
      background: #FF0;
    }
    
    

     

    各ボックスは共通して100pxの幅が指定されています。

    ボックス1には2.0、ボックス2には5.0、ボックス3には3.0の比率を指定しました。

    これは余白(200px)を2:5:3で振り分けて!という指定になります。

     

    つまり

    ボックス1:100px + 40px

    ボックス2:100px + 100px

    ボックス3:100px + 60px

    こうなります。

     

    じゃじゃーん!

    box10-1.png

     

    タグ:CSS3

この記事へのコメント

コメントを送る

  ※ メールは公開されません
Loading...
 画像の文字を入力してください

back