在flexbox内的跨度位置

Question

我的一个弹性物品遇到了麻烦。

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

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>

我已经尝试了几个将跨度显示为块的东西，因此它们占据容器的整个宽度并强制下一个跨度位于第一个下方，但这不起作用。有什么想法吗？

Answer 1

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

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

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

＆＃13;

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;