Flexbox 中心和右下角的项目 [英] Flexbox center and bottom right item
本文介绍了Flexbox 中心和右下角的项目的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试使用 flexbox 实现以下结果:
我尝试了以下 html,但我无法让它工作.
<div class="flex-item-center"><p>框 A 中的一些文本</p><div class="flex-item-bottom"><p>框 B 中的一些文本....</p>
CSS:
.flex-center {显示:弹性;对齐项目:居中;对齐内容:居中;对齐内容:居中;}.flex-item-center {对齐自我:居中;}.flex-item-bottom {align-self: flex-end;}
如何使它看起来像图像?
解决方案
我已经提出了一个可行的解决方案.
.flex-center {背景色:#739FD0;颜色:#000000;显示:弹性;弹性方向:行;flex-wrap: 包裹;对齐内容:居中;对齐内容:居中;对齐项目:居中;高度:400px;}.flex-center-bottom {背景色:#739FD0;颜色:#000000;显示:弹性;弹性方向:行;flex-wrap: 包裹;justify-content: flex-end;对齐内容:居中;对齐项目:居中;}.flex-item-center {边框:实心 2px #4675AA;订单:0;弹性:0 1 自动;对齐自我:居中;}.flex-item-bottom {边框:实心 2px #4675AA;订单:1;弹性:0 1 自动;align-self: flex-end;}
<div class="flex-item-center"><p>在此处删除文件</p>
<div class="flex-center-bottom"><div class="flex-item-center"><p>提示:您还可以在所有文件页面中删除文件</p>