CSSにおいて複数のコンポーネントを横並びに表示する方法はいくつかあるのですが
その中でフレックスボックスがいい感じに仕上がったので採用してみました。
cssでは比較的新しいプロパティであり、イメージとしては一つの細い箱の中に要素を横から詰めていく感じ
が分かりやすいかなと思います。
使い方はまず横並びにしたい要素を親要素であるdivで囲み、クラスに適当な名前を付けます。
例えば、チェックボックスw複数付けたいと思ったときはdivの中にChackBoxを内包。
</pre> <div className="option"> <Checkbox value={1} onChange={(e) => this.addOption(e)} /><h4>チラシ</h4> <Checkbox value={2} onChange={(e) => this.addOption(e)} /><h4>ホームページを見た</h4> </div> <pre>
次にCSSの設定ですが、className「option」に以下ようにプロパティを追加します。
</pre> #mypage .option { display: flex; } <pre>
h4タグのサイズ調整もついでに。
</pre> #mypage .option h4{ font-size: 14px; padding: 0px 15px; margin-top: 0px; } <pre>
このようにdisplay:flexと設定するだけでチェックボックスを横に隣接して並べることができます。
これだけ簡単で便利だけど対応ブラウザはどうなのと思う方がいると思いますが、
これはwebkit-flexを使うことである程度は緩和できそうです。
例えば、
display:-webkit-box:バージョン4までのandroid・バージョン6までのios-safari
display:-webkit-flex:バージョン6以降のios-safariまたはバージョン22以降のFireFox
display:flex:chrome主体のandroidまたはバージョン4以降のandroid
主要ブラウザの区分けはこんな感じ。
各ブラウザのバージョンに備えて一挙に定義するとより安定すると思います。
</pre> #mypage .option { display: flex; display: -webkit-flex; display: -webkit-box; margin-left: 6px; } display: -webkit-flex: <pre>
とまあこのようにシンプルかつ短いコードで横並びにすることができました。
flex以外にもdisplay:inline-blockやTableタグで横に揃えることができますが、縦に隣り合うコンポーネント
と競り合ったりコードが長くなりがち(特にTable)で少し読みにくかったりと縛りが多いなと感じたので
それを加味するとこちらに軍配が上がるのかなと思いました。