結局 要素を横並びにするならflexboxが一番簡単

要素を横並びにする際にelementorなどのプラグインを使うのであればCMS側で簡単に設定できますが、それ以外の場面でcssで指定しないといけない場面も多々あります。

色々な方法がありますが、一番簡単な方法は

親要素にdisplay:flexを指定するだけの方法が最も手っ取り早い。

以下サンプルコードになります。

<div class="flex">
<div>あいうえお</div>
<div>かきくけこ</div>
</div>
.flex{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; }

ちなみに要素を画面中央に持ってくるには

 
flex-flow: wrap;
justify-content:center;

更に要素間に隙間を作るために

gap: 6px 4px;

これで、要素を横並びにしつつ、画面の中央に配置し、要素間に隙間を作ることができました。

コメント

タイトルとURLをコピーしました