cssのflexで子要素divをsectionタグで囲いながら等間隔に並べる方法

web制作

flexで等間隔に要素を並べる時、その均等に並べる要素をそれぞれsectionタグで囲った場合のHTMLおよびCSS記述法について、備忘録で書いておきます。

これから構築(マークアップ)される方は、参考にされてみてください。

まずはHTML。



  <div id="list_item_frame">

      <section>
        <div class="list_item"></div>
      </section>

      <section>
        <div class="list_item"></div>
      </section>

      <section>
        <div class="list_item"></div>
      </section>

      <section>
        <div class="list_item"></div>
      </section>

    </div>

次に、CSS。



    #list_item_frame{
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flex;
      display: -o-flex;
      display: flex;
      justify-content: space-between;
      -webkit-justify-content: space-between; /* Safari */
      width: 100%;
      margin: 0 auto;
      padding: 30px 0;
      text-align: center;
    }
    #list_item_frame section{
      display: inline;
      width: 24%;
    }
    .list_item{
      display: inline-block;
      width: 100%;
    }

で、こんな感じになります。(イメージ。)

色々と省略したソースコードおよび図で申し訳ないんですが、HTML側のlist_itemは好きな情報を入れて、上記のようなカードレイアウトになるよう、うまく調整してください。あと、ソースコードのsectionのwidthの%を調整することで、均等並びになる各要素の空き間隔を調整できます。

HTML5だと、sectionなどで意味づけをしたいのですが、sectionをblockとして扱っている場合も多く、そういう時にflexを使うと、思わぬエラーに遭遇することがあります。

たぶん、他にもいろいろな方法がありますが、ひとまず、一つの具体例でした。flexを使いたいのだけど、sectionタグが邪魔してうまく並べられない時の参考にしてもらえれば幸いです。

flexboxについて詳しく知りたい方は、下記の記事が参考になります。

・CSS3のFlexboxを基本から理解して、使い倒そう!
https://liginc.co.jp/web/html-css/css/21024

・flexboxのバグに立ち向かう(flexboxバグまとめ)
https://qiita.com/hashrock/items/189db03021b0f565ae27

あと、「flex 横幅 統一」などでググるとたくさんの記事があります!

最後に一言

均等に並べる際は、錯視にご用心。

本記事を気に入って頂けたら、facebookの「いいね!」を是非!

cssのflexで子要素divをsectionタグで囲いながら等間隔に並べる方法


本記事のシェアはこちらから!

  • このエントリーをはてなブックマークに追加
  • Pocket

PROFILE

yoshi

本ブログ・WebMakeBlog KIYOTATSUを運営しているYoshiと申します。普段はWEB制作をやっています。得意なのは要件定義や構築で、HTML/css/javascript/PHP/git/wordpress/MT/DB/photoshop/illustrator/fireworksなど扱えます。サーバー・アプリなども習得中。