CSS如何实现父容器内两个子元素分别固定在顶部和底部

实现效果参考：

现有代码问题 #

• 父级flex容器错误添加了items-center类，会强制所有子元素纵向居中，无法实现上下分流布局
• 存在类名拼写错误：justify-betwen为无效类，正确写法是justify-between
• 包裹标题、日期的文本容器未设置纵向弹性布局，也没有占满父容器纵向高度，内部两个文本块无法自动分配到容器顶部和底部

修改后可直接运行的代码 #

核心修改逻辑：

1. 父容器将items-center替换为items-stretch，让子元素默认占满容器纵向高度，修正类名拼写
2. 给父容器加和图片高度匹配的最小高度min-h-40，保证布局高度统一
3. 中间文本容器添加flex flex-col justify-between类，开启纵向弹性布局，让内部两个子元素自动贴靠容器顶部、底部

<div class="w-full flex justify-between bg-white items-stretch min-h-40">
    <div class="ml-auto">
        <img class="object-cover mr-2 md:mr-4 ml-2 md:ml-4 float-left h-40 lg:w-32 w-14 xs:w-16"
            src="../img/Bless.png" alt="" />
    </div>

    <div class="w-full mx-8 flex flex-col justify-between py-2">
        <div class="text-redfull text-ms xs:text-lg md:text-xl lg:text-2xl xl:text-3xl">
            Some text here to top as a title.
        </div>

        <div class="text-gray70 flex justify-between items-center text-xs xs:text-base md:text-base lg:text-lg mb-0">
           and this is the date to the bottom Uploaded August 4, 2020
        </div>
    </div>
</div>

可选调整项 #

• 如果需要文字和容器上下边缘留间距，可以调整中间文本容器的py-2类，换成py-3/py-4等更大的内边距值
• 如果不需要容器和图片等高，可以把父容器的min-h-40替换为你需要的自定义高度，比如min-h-[180px]
• 原代码中月份拼写有误，已将Auguts修正为正确写法August

内容的提问来源于stack exchange，提问作者Divad