css - 垂直居中和拉伸(stretch)行导向的 Flexbox

Question

我正在尝试使用 flexbox (flex-direction: row) 创建基本上是 Bootstrap v4 卡片的水平/行导向版本。我不想有一个标题，而是想要一个包含卡片图标的左栏，而右栏将包含卡片的文本。我已经完成了大约 95%，除了当我将左列垂直居中时，它不再占据整个垂直间距(请参阅黄色 .icon div 周围的黑色区域)下面的 CodePen 示例)。如果我告诉该列自行拉伸(stretch)(将 .icon 类的 align-self 属性更改为 stretch)，该列将失去其垂直方向居中。

如何使左/黄/.icon 列垂直居中并覆盖所有垂直空间？

CodePen 示例将父子 div 着色以显示它们占用的区域，但在我的最终产品中，只有 .icon div 具有背景色。其他两个 div(.wrapper 和 .content)将没有任何背景色。我宁愿不必设置卡片的垂直高度，但如果这是完成我想要完成的任务的唯一方法，那也不会成为交易破坏者。

CodePen.io example

Answer 1

您可以使 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>

pen forked