html - 当 flex-direction 设置为 column 时，如何使用 flexbox 将元素对齐到 div 的底部

Question

我知道这个问题已经被问过好几次了，但出于某种原因我的问题没有解决。你们能帮帮我吗？我只是想将所有按钮与所有卡片对齐，因为图 block 可能有不同的长度，一行、两行或三行，但我不知道为什么它不起作用。谢谢!

    .cards {
        max-width: 1200px;
        display: flex;
    }

    .card {
        flex: 1;
        margin-right: 30px;
    }

    .content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .pic {
        min-height: 20vh;
        background: blue;

    }

    <div class="cards">
        <div class="card red">
            <div class="pic">
            </div>
            <div class="content">
                <h1>Lorem ipsum dolor sit ait.Lorem ipsum dolor sit ait </h1>
                <button>click here</button>
            </div>
        </div>
        <div class="card blue">
            <div class="pic">

            </div>
            <div class="content">
                <h1>Lorem ipsum dolor sit ait. </h1>
                <button>click here</button>
            </div>
        </div>
    </div>

这就是我想要的样子。

Answer 1

要使用 justify-content: space-between; 属性，必须定义 height 或 width。

对于 flex-direction:column 必须定义 height

  .cards {
        max-width: 1200px;
        display: flex;
    }

    .card {
        flex: 1;
        margin-right: 30px;
    }

    .content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      height:200px;
      
    }

    .pic {
        min-height: 20vh;
        background: blue;

    }

    <div class="cards">
        <div class="card red">
            <div class="pic">
            </div>
            <div class="content">
                <h1>Lorem ipsum dolor sit ait.Lorem ipsum dolor sit ait </h1>
                <button>click here</button>
            </div>
        </div>
        <div class="card blue">
            <div class="pic">

            </div>
            <div class="content">
                <h1>Lorem ipsum dolor sit ait. </h1>
                <button>click here</button>
            </div>
        </div>
    </div>