我正在尝试使用 flexbox (flex-direction: row
) 创建基本上是 Bootstrap v4 卡片的水平/行导向版本。我不想有一个标题,而是想要一个包含卡片图标的左栏,而右栏将包含卡片的文本。我已经完成了大约 95%,除了当我将左列垂直居中时,它不再占据整个垂直间距(请参阅黄色 .icon
div 周围的黑色区域)下面的 CodePen 示例)。如果我告诉该列自行拉伸(stretch)(将 .icon
类的 align-self
属性更改为 stretch
),该列将失去其垂直方向居中。
如何使左/黄/.icon
列垂直居中并覆盖所有垂直空间?
CodePen 示例将父子 div 着色以显示它们占用的区域,但在我的最终产品中,只有 .icon
div 具有背景色。其他两个 div(.wrapper
和 .content
)将没有任何背景色。我宁愿不必设置卡片的垂直高度,但如果这是完成我想要完成的任务的唯一方法,那也不会成为交易破坏者。
最佳答案
您可以使 flex boxe 在 child 中也使用对齐方式。
不太确定你到底在找什么,但这里有一个 inbrication 和使用 flexbox 来居中的例子:
包装在屏幕中间,内容图标也在中间
html {
display:flex;
height:100%;/* give an height or min-height to that flex boxe */
}
body {/* single element, easy to middle center */
margin:auto;/* or justify-content+align-items center on html */
}
.wrapper {
background-color: black;
color: white;
display: flex;
flex-flow: row nowrap;
min-height: 100%;
width: 300px
}
.icon {
display:flex;/* flex child can be a flex boxe too */
align-items:center;
background-color: yellow;
color: black;
flex: 1 1 auto;
font-size: 32px;
padding: 20px;
}
.content {
background-color: lightgreen;
color: black;
flex: 12 1 auto;
padding: 20px;
}
h4 {
margin:0 0 10px;
}
/* where is body ? */
body {
box-shadow:0 0 0 5px white, 0 0 0 15px tomato;
}
<div class="wrapper">
<div class="icon">
@
</div>
<div class="content">
<h4>Application #1</h4>
<p>This is an application of flexbox. Tomato color is shadowed from body.</p>
</div>
</div>
关于css - 垂直居中和拉伸(stretch)行导向的 Flexbox,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37260598/