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这是水平轴时）由属性{{1}确定}。（默认值为align-items，导致flex项一直延伸到flexbox容器的末尾）

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

Answer 3

使用align-items: flex-start

在CSS代码段中再添加一个属性

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

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

3 个答案: