如何在将项目保留在列中的同时对齐左侧项目？

Question

I am trying to align items left while keeping them in a column, however, when I put items in a column, it defaults to re-centering the items on the page.

Here's what I have:

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

The alignment in the cross-axis (when you have a column flexbox this is the horizontal axis) is determined by the property align-items . (the default value is stretch which causes the flex items to extend all the way to the end of the flexbox container)

Set align-items: flex-start - see demo below:

 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 2

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

text-align:left

Answer 3

Add one more property in your CSS snippet with 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 */
}