CSS Flexbox：如何将对齐的项目保留在列中？

Question

我试图将项目留在列中，但是，当我将项目放入列中时，它默认将项目重新居中在页面上。

这是我有：

HTML

<div className='postHeader'> 
    <div>{post.title}</div> 
    <div>{post.author}</div> 
</div> 

CSS

.postHeader { 
    padding-top: 60px; 
    padding-left: 25px; 
    display: flex; 
    justify-content: flex-start; 
    flex-direction: column; 
} 

Answer 1

的text-align属性指定的元素文本的水平对齐方式。

text-align:left 

Answer 2

在横轴对齐（当你有一个柱flexbox这是水平轴）是由属性align-items确定。 （默认值是stretch导致柔性项目一路延伸到Flexbox的容器的结束）

集align-items: flex-start - 看演示如下：

div { 
 
    border: 1px solid; 
 
} 
 

 
.postHeader { 
 
    padding-top: 60px; 
 
    padding-left: 25px; 
 
    display: flex; 
 
    justify-content: flex-start; 
 
    flex-direction: column; 
 
    align-items: flex-start; /* ADDED */ 
 
}

<div class='postHeader'> 
 
    <div>{post.title}</div> 
 
    <div>{post.author}</div> 
 
</div>

Answer 3

添加一个在你的CSS更多的财产片段已align-items: flex-start

HTML

<div className='postHeader'> 
    <div>{post.title}</div> 
    <div>{post.author}</div> 
</div> 

CSS

.postHeader { 
    padding-top: 60px; 
    padding-left: 25px; 
    display: flex; 
    justify-content: flex-start; 
    flex-direction: column; 
    align-items: flex-start; /* ADDED */ 
}