如何将剩余的项目保持在列中而将它们对齐? | 如何将剩余的项目保持在列中而将它们对齐

本文介绍了如何将剩余的项目保持在列中而将它们对齐?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图将剩余的项目保留在列中，但是当我将项目放入列中时，默认情况下将其重新居中在页面上.

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.

这就是我所拥有的:

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

推荐答案

横轴中的对齐方式(当您有列 flexbox 这是水平轴)由属性 align-items 确定.(默认值为 stretch ，这会使flex项目一直延伸到flexbox容器的末尾)

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)

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

这篇关于如何将剩余的项目保持在列中而将它们对齐?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！