Question

我已使用div将display:flex内容集中在包装器中。现在问题是子div显示在一行，但我想让它显示在彼此之上。这是我的代码：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

只需添加flex-direction: column;

即可

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

如何在多行中显示div而不是一行

1 个答案: