スポンサーリンク

【ワードプレス トラブル】アイテムが横並びにならない。cssで解決

WEB

ワードプレスでアイテムとアイテムの間が開いて、配置が横並びにならない。
というトラブルが発生しました。

display: flex;
flex-wrap: wrap;

そこでcssに上記コードを入力した所、無事解決しました。
「display: flex;」で親要素をフレックスコンテナにして、その子要素をフレックスアイテムにします。

<div style="display: flex;">
  <div>アイテム1</div>
  <div>アイテム2</div>
  <div>アイテム3</div>
</div>

上記の場合だと、<div> タグがフレックスコンテナとなり、その中の「アイテム1、アイテム2、アイテム3」がフレックスアイテムになります。

そして「flex-wrap: wrap;」によってフレックスアイテムが、コンテナの幅を超えた場合、アイテムが次の行に折り返されます。
もし「flex-wrap: wrap;」がないと、全アイテムが1行で表示されてしまいます。

以上が私の解決方法です。
誰かのお役に立てば幸いです。

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