我正在尝试使用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>
CSS:
.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; }
我怎样才能让它看起来像图像?
解决方法
我已经找到了一个可行的解决方案.
.flex-center { background-color: #739FD0; color: #000000; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-content: center; align-items: center; height: 400px; } .flex-center-bottom { background-color: #739FD0; color: #000000; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; align-content: center; align-items: center; } .flex-item-center { border: solid 2px #4675AA; order: 0; flex: 0 1 auto; align-self: center; } .flex-item-bottom { border: solid 2px #4675AA; order: 1; flex: 0 1 auto; align-self: flex-end; }
<div class="flex-center"> <div class="flex-item-center"> <p>DROP FILES HERE</p> </div> </div> <div class="flex-center-bottom"> <div class="flex-item-center"> <p>Hint: You can also drop files in the all files page</p> </div> </div>
2017年更新:在谷歌浏览器Versión62.0.3202.89(Build oficial)(32位)中测试.
.flex-center,.flex-center-bottom { align-items: center; background-color: #739FD0; color: #000000; display: flex; } .flex-center { height: 400px; justify-content: center; } .flex-center-bottom { justify-content: flex-end; } .flex-item-center { border: solid 2px #4675AA; font-family: Arial,sans-serif; font-size: 1.6em; line-height: 1px; padding: 0 3px; }
<div class="flex-center"> <div class="flex-item-center"> <p>Some text in box A</p> </div> </div> <div class="flex-center-bottom"> <div class="flex-item-center"> <p>Some text in box B...</p> </div> </div>
我希望这可以帮助你.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。