浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【css】フレックスボックスを使って要素を横並びにする方法

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)で少し読みにくかったりと縛りが多いなと感じたので

それを加味するとこちらに軍配が上がるのかなと思いました。

  • この記事いいね! (0)