如何在将项目保持在列中的同时将项目左对齐？答案

【问题标题】：How can I align items left while keeping them in a column?如何在将项目保持在列中的同时将项目左对齐？
【发布时间】：2018-02-26 13:06:14
【问题描述】：

我试图将项目左对齐，同时将它们保持在一列中，但是，当我将项目放在一列中时，默认情况下将项目重新居中在页面上。

这是我所拥有的：

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

【问题讨论】：

这里不需要填充，而是使用 flex-basis: 或 flex: 。如果仍然没有得到，请发布代码的 sn-p。

标签： html css flexbox alignment

【解决方案1】：

横轴中的对齐方式（当你有一个列flexbox这是水平轴）由属性align-items决定。（默认值为stretch，这会导致弹性项目一直延伸到弹性盒容器的末尾）

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

【讨论】：

【解决方案2】：

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

text-align:left

【讨论】：

【解决方案3】：

用align-items: flex-start在你的CSS sn-p中添加一个属性

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 */
}

【讨论】：

那个完全相同的答案给出了 50 分钟。在你给你之前，为什么我们需要 2 个？