使用flexbox垂直对齐div(Align divs vertically using flexbox)
我正在尝试使用flexbox垂直对齐三个div块。
我可以让它们水平对齐,但不能垂直对齐。
我究竟做错了什么?
.banner { padding-top: 10px; padding-bottom: 10px; background-color: #01b9d5; color: white; height: 55px; } .banner-align { display: flex; align-items: center; justify-content: center; border: 1px solid green; } .banner-hero { flex: 1; align-self: center; max-width: 50%; border: 1px solid red; text-align: center; display: inline-block; } .banner-left { align-self: flex-start; flex: 1; border: 1px solid green; display: inline-block; } .banner-right { align-self: flex-end; flex: 1; text-align: right; border: 1px solid yellow; display: inline-block; }<div class="banner"> <div class="container banner-align"> <div class="banner-left"> Left Block </div> <div class="banner-hero"> <b>Title</b> </div> <div class="banner-right"> Right block </div> </div> </div>这是一个小提琴: https : //jsfiddle.net/zqc1qfk1/1/
I'm trying to align three div blocks vertically using flexbox.
I can get them horizontally aligned correctly, however not vertically.
What am I doing wrong?
.banner { padding-top: 10px; padding-bottom: 10px; background-color: #01b9d5; color: white; height: 55px; } .banner-align { display: flex; align-items: center; justify-content: center; border: 1px solid green; } .banner-hero { flex: 1; align-self: center; max-width: 50%; border: 1px solid red; text-align: center; display: inline-block; } .banner-left { align-self: flex-start; flex: 1; border: 1px solid green; display: inline-block; } .banner-right { align-self: flex-end; flex: 1; text-align: right; border: 1px solid yellow; display: inline-block; }<div class="banner"> <div class="container banner-align"> <div class="banner-left"> Left Block </div> <div class="banner-hero"> <b>Title</b> </div> <div class="banner-right"> Right block </div> </div> </div>Here is a fiddle: https://jsfiddle.net/zqc1qfk1/1/
最满意答案
只需启用容器上的wrap并为每个弹性项目指定width: 100% :
.banner-align { display: flex; flex-wrap: wrap; } .banner-align > * { flex: 0 0 100%; }现在每个flex项消耗行中的所有空间,强制其他元素创建新行。
修改小提琴
Simply enable wrap on the container and give each flex item a width: 100%:
.banner-align { display: flex; flex-wrap: wrap; } .banner-align > * { flex: 0 0 100%; }Now each flex item consumes all the space in the row, forcing other elements to create new rows.
revised fiddle
更多推荐
发布评论