flexbox （フレックスボックス）3カラム 5つの要素の時、２行目の配置を右側開けて左に寄せる方法。疑似要素で簡単に出来る。【サンプルコードあり】

flexboxで、3カラムで要素を５つ２段でならべた場合
下２段目の要素が２つの時の配置がうまくいかない。

横に３カラムの２行で
５つの要素を並べた時に、均等配置でしたいので、
justify-content: space-between;
justify-content: space-around;
で設定するのですが、この方法だと、２つの要素の並びが
両端によるか、中途半端な場所での均等配置になる。

下図のような状態になる。

justify-content: space-between;の場合

justify-content: space-around;の場合

そこで探してみたら、方法があったので記事にしました。

方法は簡単で、疑似要素のafterを使うと解決できました。

疑似要素使って２つの要素を左寄せ並べ

実際に書いたコードがこちらになります。

HTML

<body>
  <div class="container">
    <div class="item"><img src="./imgs/kogaikan.jpg" alt=""></div>
    <div class="item"><img src="./imgs/pamoniter.jpg" alt=""></div>
    <div class="item"><img src="./imgs/papaper.jpg" alt=""></div>
    <div class="item"><img src="./imgs/paso.jpg" alt=""></div>
    <div class="item"><img src="./imgs/pchand.jpg" alt=""></div>
  </div>
</body>

<body>

</div>

</body>

CSS

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  border: 3px solid #2f10dd;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 15px;
  margin: 100px;
}

.container::after {
  content: "";
  display: block;
  width: 250px;
}

.item {
  width: 250px;
  margin-bottom: 10px;
}

.item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  vertical-align: bottom;
}

body {

margin: 0;

padding: 0;

box-sizing: border-box;

}

.container {

border: 3px solid #2f10dd;

display: flex;

justify-content: space-between;

flex-wrap: wrap;

padding: 15px;

margin: 100px;

}

.container::after {

content: "";

display: block;

width: 250px;

}

.item {

width: 250px;

margin-bottom: 10px;

}

.item img {

width: 100%;

height: 100%;

object-fit: cover;

vertical-align: bottom;

}

こんな感じで疑似要素入れると綺麗に左寄せで配置可能。

これからは、グリッドデザインの使用も増えてくると思いますが、
この方法、flexboxでデザインする場合覚えとくと便利ですよ。

ただこの方法、今回のように写真を入れる場合は、after要素の
横幅を単純に同じに揃えればOKですが。

テキストなどを入れる場合はサイズ設定には注意が必要になります。
パディング・ボーダーの設定に注意。

テキストの場合書いたコード

HTML

<body>
  <h1>テキストの場合</h1>
  <div class="container text">
    <div class="item">item1</div>
    <div class="item">item2</div>
    <div class="item">item3</div>
    <div class="item">item4</div>
    <div class="item">item5</div>
  </div>
</body>

<body>

<h1>テキストの場合</h1>

</div>

</body>

CSS

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
h1 {
  text-align: center;
}

.container {
  border: 3px solid #2f10dd;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 15px;
  margin: 10px 50px;
}

.text .item {
  width: 250px;
  margin-bottom: 10px;
  padding: 20px;
  background-color: aqua;
  border: 2px solid #2f10dd;
}
.container::after {
  content: "";
  display: block;
  width: 250px;
}

body {

margin: 0;

padding: 0;

box-sizing: border-box;

}

h1 {

text-align: center;

}

.container {

border: 3px solid #2f10dd;

display: flex;

flex-wrap: wrap;

justify-content: space-around;

padding: 15px;

margin: 10px 50px;

}

.text .item {

width: 250px;

margin-bottom: 10px;

padding: 20px;

background-color: aqua;

border: 2px solid #2f10dd;

}

.container::after {

content: "";

display: block;

width: 250px;

}

このCSSだと、最後の要素がズレちゃいます。

こんな感じになりました。

これは、幅の指定はしてるが.itemに指定してる、

padding: 20px;とborder: 2px　の指定をしてないのが原因

なので、borderは引けないので、.container::after のなかに、

padding: 22px;を追加するとOKです。

CSS

.container::after {
  content: "";
  display: block;
  width: 250px;
  padding: 22px;
}

.container::after {

content: "";

display: block;

width: 250px;

padding: 22px;

}

これで下図のように配置されました。

この方法の場合、レスポンシブで縦にした場合、一番下にも空白が出来るので、
無効化の設定も忘れないようにしましょう。

グリッドデザインを使うと、flexboxよりも簡単に複雑なデザインが
可能になります。

その一例もこちらの記事で紹介してます。

【サンプルコードあり】グリッドレイアウトでサイズがバラバラの画像の配置をでやってみた。レスポンシブ対応まで挑戦。

グリッドレイアウトを使うと、レイアウトが簡単に作れるようになる。今まで使ってたFlexboxでは、ちょっと再現しにくいレイアウトもグリッドレイアウトを使うと、いろんなパターンが簡単に作れる印象です。このグリッドレイアウト、色々調べた結果...

ここまで読んでいただきありがとうございます。
コーディングの勉強大変ですよね。
次々といろんなエラーやわからない事が出てきて、
私も大変でした。

最初は、独学で出来るんじゃないかなと思ってましたが、
なかなかハードル高いし、時間がかかるなと感じ、何かの
スクールに入って、わからない事は教えてもらえる。

または、同じ環境で聞き合える相手を作るのも必要。
なんじゃないかと感じました。
最初は費用がかかり大変ですが、環境整えて早く案件を受注
出来るようにしていけば、費用の回収以上の成果は出るはずです。

今こんなのサービスもありますよ↓

HTML・CSS・Bootstrap・Wordpress学習「完全サポートコース」「独学コース」WPHack講座

プログラミングスクールの需要が、ここ最近は高まってる傾向にあります。近年は、プログラミングを勉強して、ネット制作の仕事をされる方が多くなり、独学で勉強されてる方や、塾などに通って勉強される方様々です。また、プログラミングスクールいろ...

YouTube動画はこちら