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

Posted 2023-03-05

【中文标题】如何在将项目保持在列中的同时将项目左对齐？

【英文标题】：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。

【参考方案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 个？