在flex布局下既让项目居中对齐同时以基线对齐？

Question

在flex布局下既让项目居中对齐同时以基线对齐？

9812039

发布于
2017-10-01

更新于
2017-10-02

图片描述

如图，为了方便观察，我给各部分标了背景颜色，其中灰色是div，橙色是b标签，绿色是span标签。
我想达到的效果是，让"啦啦啦"这一行位于div的居中位置不变，让“啊啊啊啊啊啊啊。。。”的第一行和“啦啦啦”以基线方式对齐，怎么解决？（以flex的布局方式解决）

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        body,html{height: 100%;}
        div{height:30%;width: 400px;display:flex;align-items: center;background: #ccc;}
        b{flex-basis: 200px;background: #f93;}
        span{background: #390;}
    </style>
</head>
<body>
    <div>
        <b>啦啦啦</b>
        <span>
            啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
        </spen>
   </div>
</body>
</html>

如果将span设为align-items：baseline的话，并不是以b为基线对齐的
图片描述