要素を横並びにする際に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;
これで、要素を横並びにしつつ、画面の中央に配置し、要素間に隙間を作ることができました。
コメント