flex奇数個を並べる

2022/5/3 初心者

Pocket

flexを使用して、コンテンツを並べるときにjustify-content: space-between;を使用すると、二段目以降が左寄せで並ばないと、イライラしたことがあるかと思います。

よく、flexの子要素に疑似要素::afterをつけて回避がありますが、それとは別の方法をご紹介したいと思います。

動作のサンプルはこちら！

 

動作サンプルは、ブラウザ幅が768px以上の時に、コンテンツ間のmarginを10px維持する並べ方です。また、二段目以降もかならず左寄せになります。

 

<html>

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <link rel="stylesheet" href="css/common.css">
  6.     <title>デモ</title>
  7.     <meta name="description" content="">
  8.     <meta name="keywords" content="">
  9.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  10.     <link rel="stylesheet" href="css/index.css">
  11.   </head>
  12.   <body>
  13.     <!--header-->
  14.     <header></header>
  15.     <main ontouchstart="">
  16.       <div class="backgroundBox">
  17.         <div class="Container">
  18.           <p class="start">justify-content: start;</p>
  19.           <div class="box-flex">
  20.             <div class="item">
  21.               <p>タイトル</p>
  22.               <p>コンテンツ</p>
  23.             </div>
  24.             <div class="item">
  25.               <p>タイトル</p>
  26.               <p>コンテンツ</p>
  27.             </div>
  28.             <div class="item">
  29.               <p>タイトル</p>
  30.               <p>コンテンツ</p>
  31.             </div>
  32.             <div class="item">
  33.               <p>タイトル</p>
  34.               <p>コンテンツ</p>
  35.             </div>
  36.             <div class="item">
  37.               <p>タイトル</p>
  38.               <p>コンテンツ</p>
  39.             </div>
  40.           </div>
  41.         </div>
  42.       </div>
  43.     </main>
  44.     <!--footer-->
  45.     <footer></footer>
  46.   </body>
  47. </html>

 

 

<css>

  1. * {
  2.   margin: 0;
  3.   padding: 0; }
  4.  
  5. html {
  6.   font-size: 62.5%;
  7.   -webkit-box-sizing: border-box;
  8.   box-sizing: border-box; }
  9.  
  10. .backgroundBox {
  11.   background-color: #9e9e9e66; }
  12.  
  13. .Container {
  14.   max-width: 980px;
  15.   margin: 0 auto 50px;
  16.   padding-top: 30px;
  17.   padding-bottom: 50px;
  18.   padding-right: 10px;
  19.   padding-left: 10px; }
  20.  
  21. .start {
  22.   font-size: 2.5rem; }
  23.  
  24. .space {
  25.   font-size: 2.5rem; }
  26.  
  27. /*justify-content: start;*/
  28. @media screen and (min-width: 768px) {
  29.   .box-flex {
  30.     display: -webkit-box;
  31.     display: -webkit-flex;
  32.     display: -ms-flexbox;
  33.     display: flex;
  34.     -webkit-flex-wrap: wrap;
  35.     -ms-flex-wrap: wrap;
  36.     flex-wrap: wrap; } }
  37.  
  38. .item {
  39.   height: 150px;
  40.   color: white;
  41.   background-color: #5555dc;
  42.   margin-bottom: 10px; }
  43.   @media screen and (min-width: 768px) {
  44.     .item {
  45.       -webkit-flex-basis: calc(calc(100% - 20px) / 3);
  46.       -ms-flex-preferred-size: calc(calc(100% - 20px) / 3);
  47.       flex-basis: calc(calc(100% - 20px) / 3); }
  48.       .item:not(:nth-child(3n)) {
  49.         margin-right: 10px; } }
  50.  
  51.  

<ポイント>

・justify-content: start;を指定

・flexの子要素にはflex-basisiにcalcを使用して、マージン幅を確保します。

100% – 20px ⇒flexを適用する親要素の幅内で、確保したいmarginの合計値を決める。今回は20px。

・flex子要素にmarginを指定する。今回は横に3つ要素を並べるので、3番目の要素にはmarginを適用しない。⇒:notを使用して3の倍数以外の要素にmarginを適用している。1番目と2番目の要素にmargin-right、10px指定しているので、margin合計値は20px。

 

すごく説明しにくいので、サンプル見て動かしてみてください。

今回は以上です。