要素同士の下の余白を埋めたい

Question

前提・実現したいこと

下記のリンクのメイン部分のように要素を配置したい。
参考リンク

発生している問題・エラーメッセージ

widthを指定すると画像のように要素が縦長になってしまう。
heightをしていすると、要素の形は整うが下に余白ができてしまう。

該当のソースコード

<div class="main-contents__list">
                    <article class="main-contents__block">
                        <figure class="main-contents__image">
                            <a href="#">
                                <img src="" alt=""
                                    width="350" height="">
                            </a>
                        </figure>
                        <section class="main-contents__texts">
                            <p class="main-contents__time">2020/09/09</p>
                            <h2><a href="">タイトルタイトル</a></h2>

                            <p class="main-contents__description">
                                テキスト</p>
                        </section>
                        <p class="btn"><a href="#">READ MORE</a></p>
                    </article>繰り返し




                </div>

.main-contents {
        max-width: 1200px;
        margin: 0 auto;
        margin-top: 30px;

        .main-contents__title{
            font-size: 30px;
            margin-bottom: 30px;
            margin-left: 25%;
            @include border();


        }
        .main-contents__box {
            display: flex;

            .main-contents__list {
                word-wrap: break-word;
                flex-wrap: wrap;
                justify-content: space-around;
                margin: 0 auto;
                word-break: break-all;
                display: flex;
                list-style: none;
                margin-bottom: 0;

                @include common-block("large");

            }
        }
    }

@else if( $type == 'large' ){
    //スタイル
    .main-contents__block{
        list-style: none;
        width: 350px;
        height: 500px;
        border: 1px solid $main;
        border-radius: 5px;
        overflow: hidden;
        box-shadow: 0 0 8px gray;      
        @include btn();
        text-align: center;
        margin-bottom: 30px;

        .main-contents__texts{
            word-break: break-all;
            padding: 30px;
            text-align: center;

            .main-contents__time{
                margin-bottom: 10px;
            }   
            h2{
                margin-bottom: 10px;
                a{
                    color: $main-contents_a;
                }
            }


        }

    }
  }

試したこと

heightの指定を変えたが解決しなかった。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

多分ここかな

.main-contents__box {
　　display: flex;
↓
.main-contents__box {
　　display: flex;
　　align-content:start;
　　align-items:start;

Comments

[ral819]

なおりました！！
なぜこれで解決できたのですかね？

[KazuhiroHatano]

flexに係る件の２つのcssのデフォルト値はstrechになっていて
子要素の左右の高さが揃うように、かつ
行の高さの合計が親要素の高さと同じになるように
高さが引き延ばされるようになっているからです

Answer 2

勘で答えてみます。

「要素同士の下の余白」= 要素と要素の間の下の余白のこと

.main-contents__block{
  /* 前略 */

  /* margin-bottom: 30px; */
  margin-bottom: 15px; /* 30pxより小さい、好きな値を指定してください */
}

---

「要素同士の下の余白」= 要素の内側の余白のこと

.main-contents__block{
  list-style: none;
  width: 350px;
  /* height: 500px; */
  padding-bottom: 30px;
  
  /* 後略 */
}

---

こちらについて、もしかして画像についての話ですか?

widthを指定すると画像のように要素が縦長になってしまう。
heightをしていすると、要素の形は整うが下に余白ができてしまう。