bootstrapのグリッドシステム
はじめに
bootstrapのグリッドシステムでcontainer、row、col-xxx-xxxを使用すると簡単にページデザインが出来上がる。 しかし、下の図のようにcol-xxx-xxxの高さが違い要素の回り込みがちぐはぐになる場合がある。
Flexboxを使用する
出典元： A Visual Guide to CSS3 Flexbox Properties
flexboxとは
フレックスボックス（フレキシブルボックス）と言う。要素サイズが不明でも柔軟にレイアウトを実現できるCSS３のレイアウトモジュール。 CSSで複雑なレイアウトを簡単にすることができる。
ブラウザのサポート状況
残念ながら古いブラウザでは対応してない。
出典元： サポート状況-Can i use
グリッドシステムでカラムの高さを合わせる方法
display: flex;を使用しカラムの高さを合わせる
1 2 3 4 5 | .row-eq-height { display: -webkit-flex; /* Safari */ display: flex; flex-wrap: wrap;} |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <div class="container"> <div class="row row-eq-height> <div class="col-xs-4"> カラム１ </div> <div class="col-xs-4"> カラム２ </div> <div class="col-xs-4"> カラム３ </div> <div class="col-xs-4"> カラム４ </div> <div class="col-xs-4"> カラム５ </div> <div class="col-xs-4"> カラム６ </div> </div></div> |
結果！！
下の図のようにぴったりと揃うようになる
0 件のコメント :
コメントを投稿