flexboxで二行以上の文章をまとめて縦中央にもっていきたい。

flexboxを用いて、上のグレーの四角の横にある二行の文章を縦の真ん中に持っていきたいです。
この時、二行の文章の親要素に align-items: center;　や　align-content: center;　を追加しても縦中央に寄りません。
しかし、justify-contentを使うとなぜか二行の文章は縦中央に寄ります。
justify-contentは本来横方向の位置を整理するものなのに、どうしてなのでしょうか。バグが起こっているのでしょうか。理由が分からず悩んでいます。分かる人がいたら、教えて頂ければ幸いです。

HTML
1<!doctype html>
2  <html>
3   <head>
4      <title>jio</title>
5       <meta charset="utf-8">
6       <link rel="stylesheet" href="style.css">
7      </head>
8      
9<body>
10 
11    <div class="box">
12      <ul>
13          
14         <li>
15           <a href="#">
16             <div class="photo"></div>
17             <div class="photo-side">
18               <div class="txt1">準備</div>
19               <div class="txt2">ホスティングの始め方</div>
20             </div>
21            </a>
22          </li>
23          
24          <li>
25            <a href="#">
26              <div class="photo"></div>
27              <div class="photo-side">
28                <div class="txt1">安全対策</div>
29                <div class="txt2">ホストを守るAirbnbのしくみ</div>
30               </div>
31             </a>
32          </li>
33          
34          <li>
35             <a href="#">
36               <div class="photo"></div>
37               <div class="photo-side">
38                 <div class="txt1">マネープラン</div>
39                 <div class="txt2">Airbnbで収入源を増やす方法</div>
40               </div>
41             </a>
42          </li>
43          
44        </ul>
45    </div>
46 
47</body>
48</html>

CSS
1* {
2  margin: 0;
3  padding: 0;
4}
5
6img {
7  vertical-align: bottom;
8}
9
10.box {
11  margin: 0 auto;
12  width: auto;
13  padding: 0 30px;
14}
15.box ul {
16  margin: 0 auto;
17  width: auto;
18  flex-direction: column;
19}
20.box ul a {
21  text-decoration: none;
22  color: black;
23  display: flex;
24}
25.box ul .photo {
26  width: 100px;
27  height: 73px;
28  background: gray;
29}
30.box ul li {
31  list-style: none;
32  width: 500px;
33  box-sizing: border-box;
34  border: 1px solid gray;
35  margin-bottom: 15px;
36}
37.box ul .photo-side {
38  display: flex;
39  flex-direction: column;
40}