複数の行を1行で表示する方法

Question

display:flexを使用してdivの内容をラッパーに中央揃えました。今問題は子divが1行に表示されていることですが、私はそれを互いに上に表示させたいと思っていました。ここに私のコードです：

.news-content-inner{ 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    height: 100%; 
 
    background-color:#cccccc; 
 
    width:300px; 
 
} 
 
.news-by-category-items > .news-content-inner > .category-tags{ 
 
    display: inline-block; 
 
    padding: 2px 8px; 
 
    font-size: 14px; 
 
    color: #fff; 
 
    font-weight: bold; 
 
} 
 
.news-by-category-items > .news-content-inner > .news-title{ 
 
    font-size: 16px; 
 
    color: #fff; 
 
    font-weight: bold; 
 
} 
 
.news-by-category-items > .news-content-inner > .news-date{ 
 
    font-size:14px; color: #fff; 
 
}

<div class="news-content-inner"> 
 
    <div class="category-tags tag3">block level text 1</div> 
 
    <div class="news-title">block level text 2 </div> 
 
    <div class="news-date">block level text 3</div> 
 
</div>

Answer 1

ちょうど追加flex-direction: column;

.news-content-inner{ 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
    justify-content: center; 
 
    height: 100%; 
 
    background-color:#cccccc; 
 
    width:300px; 
 
} 
 
.news-by-category-items > .news-content-inner > .category-tags{ 
 
    display: inline-block; 
 
    padding: 2px 8px; 
 
    font-size: 14px; 
 
    color: #fff; 
 
    font-weight: bold; 
 
} 
 
.news-by-category-items > .news-content-inner > .news-title{ 
 
    font-size: 16px; 
 
    color: #fff; 
 
    font-weight: bold; 
 
} 
 
.news-by-category-items > .news-content-inner > .news-date{ 
 
    font-size:14px; color: #fff; 
 
}

<div class="news-content-inner"> 
 
    <div class="category-tags tag3">block level text 1</div> 
 
    <div class="news-title">रblock level text 2 </div> 
 
    <div class="news-date">block level text 3</div> 
 
</div>