menu
menu

キーワード検索

 

前月(3月)の人気記事トップ10

  1. ( 1 - ) 【CSS】CSSだけでドロップダウンメニュー
  2. ( 6 ↑) 【CSS】CSSだけでサイズ可変・スマホ対応のアコーディオン
  3. (10 ↑) 【Mac】Macのユーザー名とアカウント名を変更する
  4. ( 2 ↓) 【iPhone・iPad】投稿の準備中にエラーが起きました。後でやり直してください。
  5. ( 3 ↓) 【HTML5】スマホサイトの作成・基本編
  6. ( 5 ↓) 【CSS】CSSだけでブロック要素の表示非表示(トグルボタン)
  7. ( - ↑) 【決定版】レスポンシブデザインのブレークポイントはこれで決まり❗
  8. ( 9 ↑) 【jQuery】表示しているブラウザの高さを取得してCSSのheightに指定
  9. ( 7 ↓) 【Mac】iMovieの保存場所を変更する
  10. ( - ↑) 【Mac】MacにInkscapeをインストール
このエントリーをはてなブックマークに追加

【Flexbox】justify-content:centerで最後の行を左寄せ

  • Labs

【Flexbox】justify-content:centerで最後の行を左寄せ

こんにちは(・∀・)

Flexboxでjustify-content:centerを指定した要素の中央寄せで、最後に表示される行の要素は左寄せにしたい場合、どうしたらいい⁉️

justify-content:centerで左寄せ

Flexboxのjustify-contentの値centerを使って中央寄せにすると、最後に表示される行の要素も中央寄せになってしまいます。


.oya-youso {
  display: flex;
  flex-wrap:wrap;
  justify-content: center;
}
  .oya-youso .ko-youso {
    border: 1px solid #ccc;
    width: 150px;
    min-height: 200px;
    margin: 10px;
    padding: 10px;
  }

こんな感じ...

Result
スマホでのご確認はこちらをどうぞ
QRコード

しかし、最後の行は左寄せにしたいという場合、

どうしたらいいのか...

 

justify-contentの値centerは使わないで、値flex-startを使う方法はどうでしょうか⁉️


.oya-youso {
  display: flex;
  flex-wrap:wrap;
  /*justify-content: center;使わない*/
  justify-content: flex-start;/*こっち使う*/
  max-width: 510px;/*親要素に横幅を指定*/
  margin: 0 auto;/*親要素はこれで中央寄せ*/
}
  .oya-youso .ko-youso {
    border: 1px solid #ccc;
    width: 150px;
    min-height: 200px;
    margin: 10px;
    padding: 10px;
  }

親要素の横幅をmax-widthで指定してmarginで中央寄せにします。

Result
スマホでのご確認はこちらをどうぞ
QRコード

しかし、これだと親要素の横幅が変わって子要素が次の行に送られると、左寄せになってしまいます。

 

親要素の横幅をmax-widthで決め打ちするのであれば、HTMLに空の子要素を配置するのはどうでしょう⁉️

ポイントはカラム数-1の空の子要素、5カラムなら4個の空要素をHTMLに配置します。

更に、横幅とmarginは他の子要素に合わせます。


/*子要素を3カラムにする場合*/
<section class="oya-youso-3">
<div class="ko-youso">
  <p>box1</p>
</div>
<div class="ko-youso">
 <p>box2</p>
</div>
<div class="ko-youso">
  <p>box3</p>
</div>
<div class="ko-youso">
  <p>box4</p>
</div>
<div class="empty-ko-youso"></div>
<div class="empty-ko-youso"></div>
</section>

/*子要素を3カラムにする場合*/
.oya-youso {
  display: flex;
  flex-wrap:wrap;
  justify-content: center;
  max-width: 510px;/*親要素に横幅を指定*/
  margin: 0 auto;/*親要素はこれで中央寄せ*/
}
  .oya-youso .ko-youso {
    border: 1px solid #ccc;
    width: 150px;
    min-height: 200px;
    margin: 10px;
    padding: 10px;
  }
  .oya-youso .empty-ko-youso {
    width: 150px;
    height: 0;
    background: pink;
    margin: 0 10px;
    padding: 0;
    }

/*子要素を4カラムにする場合*/
<section class="oya-youso-4">
<div class="ko-youso">
  <p>box1</p>
</div>
<div class="ko-youso">
 <p>box2</p>
</div>
<div class="ko-youso">
  <p>box3</p>
</div>
<div class="ko-youso">
  <p>box4</p>
</div>
<div class="ko-youso">
  <p>box5</p>
</div>
<div class="empty-ko-youso"></div>
<div class="empty-ko-youso"></div>
<div class="empty-ko-youso"></div>
</section>

/*子要素を4カラムにする場合*/
.oya-youso {
  display: flex;
  flex-wrap:wrap;
  justify-content: center;
  max-width: 680px;/*親要素に横幅を指定*/
  margin: 0 auto;/*親要素はこれで中央寄せ*/
}
  .oya-youso .ko-youso {
    border: 1px solid #ccc;
    width: 150px;
    min-height: 200px;
    margin: 10px;
    padding: 10px;
  }
  .oya-youso .empty-ko-youso {
    width: 150px;
    height: 0;
    background: pink;
    margin: 0 10px;
    padding: 0;
    }

するとこんな感じで中央寄せの左寄せになります。

Result
スマホでのご確認はこちらをどうぞ
QRコード

 

次のサンプルの様にJavaScriptで空要素を挿入すればHTMLに空要素を記述しなくてよくなります。


<section class="oya-youso-5">
<div class="ko-youso">
  <p>box1</p>
</div>
<div class="ko-youso">
 <p>box2</p>
</div>
<div class="ko-youso">
  <p>box3</p>
</div>
<div class="ko-youso">
  <p>box4</p>
</div>
<div class="ko-youso">
  <p>box5</p>
</div>
<div class="ko-youso">
  <p>box6</p>
</div>
</section>

.oya-youso {
  display: flex;
  flex-wrap:wrap;
  justify-content: center;
  max-width: 850px;/*親要素に横幅を指定*/
  margin: 0 auto;/*親要素はこれで中央寄せ*/
}
  .oya-youso .ko-youso {
    border: 1px solid #ccc;
    width: 150px;
    min-height: 200px;
    margin: 10px;
    padding: 10px;
  }
  .oya-youso .empty-ko-youso {
    width: 150px;
    height: 0;
    background: pink;
    margin: 0 10px;
    padding: 0;
    }

$(function(){
var $container = $('.oya-youso-5');
var elm = "";
for (i = 1; i++ < 5;) {/*カラム数分繰り返す*/
//for (i = 1; i < $container.find('.ko-youso').length; i++) {
elm += '
'; } $(".oya-youso-5").append(elm); });

Result
スマホでのご確認はこちらをどうぞ
QRコード

 

どのサンプルも空要素の高さ1pxを取っていますが、実際は0pxにしてください。


いかがでしたでしょうか、できれば親要素の横幅は100%で実現したいところでしたが、他に思いつきませんでした。

何かもっと良い方法ってありますか⁉️

  • カテゴリー:Labs
このエントリーをはてなブックマークに追加