现在想让诗句上下都对齐，不单单每一行。求css的参数，使用flex布局。
css代码如下：
text {
font-family: "Microsoft YaHei";
}
.container {
display: flex;
flex-direction: column;
align-items: center;
background-color: #f2f2f2;
}
/* 盒子 */
.box {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0 10rpx;
}
/* 标题 */
.title {
display: flex;
flex-direction: row;
align-items: flex-end;
padding: 0 10rpx;
}
.title .pinyin {
font-size: 1.5em;
}
.title .hanzi {
font-size: 1.8em;
}
/* 诗人信息 */
.info {
display: flex;
flex-direction: row;
align-items: flex-end;
margin-bottom: 10rpx;
}
/* 朝代 */
.dynasty {
display: flex;
flex-direction: row;
margin-right: 10rpx;
}
.dynasty .pinyin {
font-size: 1.2em;
}
.dynasty .hanzi {
font-size: 1.5em;
}
/* 诗人 */
.poet {
display: flex;
flex-direction: row;
}
.poet .pinyin {
font-size: 1em;
}
.poet .hanzi {
font-size: 1.3em;
}
/* 诗句 */
.verses {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
white-space: pre-wrap;
text-align: justify;
word-break: break-all;
vertical-align: middle;
}
.verse {
display: flex;
flex-direction: row;
align-items: flex-end;
justify-content: center;
vertical-align: middle;
}
.verse .pinyin {
font-size: 1em;
vertical-align: middle;
}
.verse .hanzi {
font-size: 1.3em;
vertical-align: middle;
}
拼音+文字是一块：
display: flex;
flex-direction: column;
align-items: center;
每句诗是一块：
display: flex;
flex-direction: row;
align-items: center;
最后整体一块：
display: flex;
flex-direction: column;
align-items: center;
数据组装格式：
[ [ { pinyin: 'jing', zh: '静' }, { pinyin: 'ye', zh: '夜' }, { pinyin: 'si', zh: '思' } ], [ { pinyin: 'tang', zh: '【唐】' }, { pinyin: 'dai', zh: '【代】' }, { pinyin: 'li', zh: '李' }, { pinyin: 'bai', zh: '白' } ] ...... ]