HTML中使用Flex布局实现双行夹批效果

<!DOCTYPE html>
<html>
	<head>
		<title>Flex Words</title>
		<style type="text/css">
			.container {
				display: flex; /*使用flex布局方式*/
				flex-direction: row;/*子元素的排列方向*/
				justify-content: left; /*容器的对齐方式 */
				align-items: center;/*子元素的对齐方式，主要靠这个实现文字的垂直方向对齐*/
				flex-wrap: wrap;/*实现多行Flex容器*/
			}
			.content{
				font-size:1.4em;
			}
			.comment{
				font-size:0.5em;
			}
			span{
				display:inline;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<span class="content">以备选择为公主、郡主入学陪侍，充为才人、赞善之职。</span>
			<span class="comment" style="width:20em;">【甲戌侧】一段称功颂德，千古小说中所无。</span>
			<span class="content">二则自薛蟠父亲死后，各省中所有的买卖承局、总管、伙计人等，见薛蟠年轻不识世事，便趁时拐骗起来，二则自薛蟠父亲死后，各省中所有的买卖承局、总管、伙计人等，见薛蟠年轻不识世事，便趁时拐骗起来，二则自薛蟠父亲死后，各省中所有的买卖承局、总管、伙计人等，见薛蟠年轻不识世事，便趁时拐骗起来，</span>
			<span  class="comment" style="width:12em;">【蒙侧】我为创家立业者一哭。</span>
		</div>
		<div class="container">
			<p class="content">这是另一段正文</p>
			<p class="comment" style="width:8em;">这是一个双行显示的注释</p>
			<p class="content">这是另一段正文中的文字</p>
			<p  class="comment" style="width:6em;">双行合一实现示例</p>			
		</div>
	</body>
</html>