为什么flexbox中的强文本表现为列？

Question

我最近经历了这种行为，我无法弄清楚是什么原因造成的。 <strong></strong>之间的每个文本都在我的flexbox容器中充当column（？）。

请帮助我完全迷路！

预览：

HTML：

<div id="item_desc" >
<strong>Text in strong</strong> 
nulla a laoreet nibh, at placerat leo. Proin uis condimentum ligula, ut 
viverra turpis. Morbu lamcorper consequat gravida. Aenean vestibulum urna id 
purus vulputate landit. Vivamus eleifend, erat quis dapibus pulvinar, eros 
justo commodo urpis, molestie commodo orci nisi maximus diam.   
Pellentesque posuere pulvinar malesuada. Nulla eu vestibulum erat.
Duis sit amet turpis id tellus eleifend faucibus nec non tellus. 
</div>

CSS：

#item_desc {
    border:1px solid red;
    padding: 15px 20px 15px 0px;
    min-height: 156px;
    width:100%;
    display: flex;
    justify-content: center; 
    align-items: center; 
    text-align:center;
}

我只是想将文本垂直和水平居中。该容器div是在flexbox列中的父对象<-也许是罪魁祸首，但我不知道是什么原因。

（PS：在Chrome中创建的预览）

Answer 1

将 flex-direction: column; 属性设置为 #item_desc

#item_desc {
    border:1px solid red;
    padding: 15px 20px 15px 0px;
    min-height: 156px;
    width:100%;
    display: flex;
    justify-content: center; 
    align-items: center; 
    text-align:center;
    flex-direction: column;
}

    <div id="item_desc" >
          <strong>Text in strong</strong> 
          nulla a laoreet nibh, at placerat leo. Proin uis condimentum ligula, ut 
          viverra turpis. Morbu lamcorper consequat gravida. Aenean vestibulum urna id 
          purus vulputate landit. Vivamus eleifend, erat quis dapibus pulvinar, eros 
          justo commodo urpis, molestie commodo orci nisi maximus diam.   
          Pellentesque posuere pulvinar malesuada. Nulla eu vestibulum erat.
          Duis sit amet turpis id tellus eleifend faucibus nec non tellus. 
      </div>

Answer 2

使用此html格式...并且CSS相同。

#item_desc {
    border:1px solid red;
    padding: 15px 20px 15px 0px;
    min-height: 156px;
    width:100%;
    display: flex;
    justify-content: center; 
    align-items: center; 
    text-align:center;
}

    <div id="item_desc" >
      <div class="desc-inner">
          <strong>Text in strong</strong> 
          nulla a laoreet nibh, at placerat leo. Proin uis condimentum ligula, ut 
          viverra turpis. Morbu lamcorper consequat gravida. Aenean vestibulum urna id 
          purus vulputate landit. Vivamus eleifend, erat quis dapibus pulvinar, eros 
          justo commodo urpis, molestie commodo orci nisi maximus diam.   
          Pellentesque posuere pulvinar malesuada. Nulla eu vestibulum erat.
          Duis sit amet turpis id tellus eleifend faucibus nec non tellus. 
      </div>
      </div>