横並びに flex

【CSS】Flexboxの使い方を徹底解説！基本から実践まで(サンプルあり)

.親要素{
  display: flex;
}

これで横並び！

.親要素{
  display: flex;
flex-direction: column;
}

こうすると、よこ100%で縦ならびになる

.親要素{
  display: flex;
  flex-wrap: wrap;
}

こうするとはみ出た子要素は下に改行される

これ使える！
.svbox{
    display: flex;
    justify-content: space-between;
}

横並び要素を均等配置できる
一番はしっこはピッタリ配置される

【完璧！】ギャラリーなどの一覧はこちらがいいんじゃないか

https://webtan.tech/space-between-lastline/

<div class="gazoulist">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
<div class="item">Item 5</div>
</div>

CSS

注意点は、
・疑似要素は親のハコに指定すること、
・疑似要素の大きさは、子要素のハコ(ここではコンテンツ内容)と同じ幅にすること。

スマホサイズでは　横幅を50%にするとかの指示を追加する必要がある？　ちょっと納得いかないが・・・

.gazoulist {
  display: flex;
  flex-wrap: wrap;
    justify-content: space-between;
}

.item{
    background-color: #67A0B8;
    width: 30%;
}

.gazoulist::after {
display: block;
content:"";
width: 30%;
}

横ならび４列の場合afterだけでは足りないので以下のbeforeも必要

.yoko_box::before{
  content:"";
  display: block;
  width:30%;
  order:1;
}