本文介绍了Flexbox中央和右下方项目的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试使用flexbox实现以下结果:
I'm trying to achieve the following result using flexbox:
我尝试了以下html,但无法正常工作.
I tried the with the following html but I can't get it to work.
<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;
}
如何使它看起来像图像?
How can I make it look like the image?
推荐答案
我提出了可行的解决方案.
I've made a posible solution.
.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年:在Google ChromeVersión62.0.3202.89(正式版)(32位)中进行了测试.
Update 2017: Tested in Google Chrome Versión 62.0.3202.89 (Build oficial) (32 bits).
.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>
希望对您有帮助.
这篇关于Flexbox中央和右下方项目的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!