Html Flexbox中间和右下项目

我尝试使用flexbox实现以下结果：

我尝试了以下html，但我无法让它工作

<div class=" flex-center">
    <div class="flex-item-center">
        <p>
            Some text in box A
        </p>
    </div>
    <div class="flex-item-bottom">
        <p>Some text in box B....</p>
    </div>
</div>

---

如何使它看起来像图像？

这就是您要找的吗

---

我已经提出了一个可行的解决办法

.flex中心{
背景色：#739FD0；
颜色：#000000；
显示器：flex；
弯曲方向：行；
柔性包装：包装；
证明内容：中心；
对齐内容：居中对齐；
对齐项目：居中；
高度：400px；
}
.柔性中心底部{
背景色：#739FD0；
颜色：#000000；
显示器：flex；
弯曲方向：行；
柔性包装：包装；
证明内容：柔性端；
对齐内容：居中对齐；
对齐项目：居中；
}
.flex项目中心{
边框：实心2px#4675AA；
顺序：0；
flex:01自动；
自对准：居中；
}
.柔性项目底部{
边框：实心2px#4675AA；
顺序：1；
flex:01自动；
自对准：柔性端；
}

把文件放在这里

提示：您还可以在“所有文件”页面中删除文件

在Bootstrap 4.x中，您可以使用

中锋
右下角

试试：

#主包装器{
背景：蓝色；
宽度：100%；
身高：100%；
最小高度：300px；
显示器：flex；
对齐项目：居中；
}
.x-中心{
显示器：flex；
证明内容：中心；
}
.y中心{
弹性：1；
}
.x-右{
证明内容：柔性端；
}
.y-bottom{
自对准：柔性端；
}
.小分区{
填充：10px；
}

中锋
右下角

我认为您使用了错误的JSFIDLE。因为那是关于关键帧和动画的？标记没有使用flex item底部类，flex item center没有任何意义。我只是做了适当的更改，使用了最小代码。感谢@DanielRuf的观察。

.flex-center {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
}
.flex-item-center {
  align-self: center;
}

.flex-item-bottom {
  align-self: flex-end;
}

body {
  background-color: lightblue;
}

#main {
  width: 100%;
  height: 400px;
  border: 1px solid black;
  display: -webkit-flex;
  /* Safari */
  -webkit-align-items: flex-start;
  /* Safari 7.0+ */
  display: flex;
  align-items: flex-start;
}

#main div {
  -webkit-flex: 1;
  /* Safari 6.1+ */
  flex: 1;
}

.flex-item-center {
  margin-left: 40%;
  border-style: solid;
  -webkit-align-self: center;
  /* Safari 7.0+ */
  align-self: center;
}

.flex-item-bottom {
  border-style: solid;
  align-self: flex-end;
}