Question

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

如何将左/黄色/ .icon列垂直居中和覆盖所有垂直空间？

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

CodePen.io example

Answer 1

你可以在儿童中使用弹性盒子来使用alignements。

不太确定你想要的是什么，但这里有一个关于使用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

垂直中心和Stretch Row-Oriented Flexbox

1 个答案: