css - flexbox 中的 span 位置

Question

我的一个 flex 元素有问题。

我正在尝试定位我的 flex div 的 2 个 spans 以便一个在另一个之上，但看起来 flex 的属性强制它们是彼此相邻。

Here is what I'm looking to do (the date element)

这是我所拥有的:

#til-container #til-header #til-date-container {
	display: flex;
	align-items: center;
	position: absolute;
	top: 30px;
	margin: auto;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	border: 1px solid #CCC;
	background: white;
}

#til-container #til-header #til-date-container #til-date {
	display: flex;
	align-items: center;
	position: relative;
	margin: auto;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #d24949;
	color: #FFF;
	font-family: 'Lato', sans-serif;
	text-transform: uppercase;
	font-weight: 900;
	text-align: center;
}

#til-container #til-header #til-date-container #til-day {
	font-size: 20px;
}

#til-container #til-header #til-date-container #til-month {
	font-size: 10px;
}

<div id="til-container">
	
	<div id="til-header">
		<div id="til-date-container">
			<div id="til-date">
				<span id="til-day">25</span>
				<br/>
				<span id="til-month">dec</span>
			</div>
		</div>
	</div>
	
</div>

我已经尝试了几种方法，例如将跨度显示为 block ，以便它们占据容器的整个宽度并强制下一个跨度位于第一个跨度下方，但这行不通。有什么想法吗？

Answer 1

使用 flex，您可以添加到 #til-date

flex-direction: column;
justify-content: center;

我编辑了您的代码段以添加它:

#til-container #til-header #til-date-container {
	display: flex;
	align-items: center;
	position: absolute;
	top: 30px;
	margin: auto;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	border: 1px solid #CCC;
	background: white;
}

#til-container #til-header #til-date-container #til-date {
	display: flex;
	align-items: center;
	position: relative;
	margin: auto;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #d24949;
	color: #FFF;
	font-family: 'Lato', sans-serif;
	text-transform: uppercase;
	font-weight: 900;
	text-align: center;

    /* Added */
    flex-direction: column;
    justify-content: center;
}

#til-container #til-header #til-date-container #til-day {
	font-size: 20px;
}

#til-container #til-header #til-date-container #til-month {
	font-size: 10px;
}

<div id="til-container">
	
	<div id="til-header">
		<div id="til-date-container">
			<div id="til-date">
				<span id="til-day">25</span>
				<br/>
				<span id="til-month">dec</span>
			</div>
		</div>
	</div>
	
</div>