Question

我是CSS的新手，我正在努力按照我想要的方式定位flex项目（DownloadButton）。

我想以某种方式定位弹性项目，但我的谷歌搜索技能让我失望。

目前的状态如下：

Icon DownloadButton DeleteButton

我想要的是：

Icon DownloadButton DeleteButton

我以为我可以使用align-items，但那是横轴。而不是像正常的弹性行为一样，我希望我的DownloadButton最后拥抱DeleteButton。但是，我的谷歌搜索技能让我失望了。非常感谢帮助，谢谢你们！

Answer 1

我会将项目对齐到最后（首选项），然后调整第一项。

正如评论中所指出的那样，不需要结束对齐，因为效果是由边际调整引起的。

.parent {
  width: 80%;
  margin: 1em auto;
  border: 1px solid grey;
  display: flex;
  justify-content: flex-end;
  padding: .5em;
}
button:first-child {
  margin-right: auto;
}

<div class="parent">
  <button>Icon</button>
  <button>Download</button>
  <button>Delete</button>
</div>

Answer 2

将这些样式添加到容器中：

#flex-container { /*Select Your Flex Container*/
display: flex;
flex-direction: row;
justify-content: space-between;
}

为灵活项目添加以下样式：

.flexible-items { /*Select The Children Of The Flex Container*/
flex-grow: 0; /*This Is Default*/
}
#Icon {
flex-grow: 1;
}

如果你想在另外两个灵活项目之间留出一些空间，你可以通过多种方法实现这一点，1是为它们的边添加一些边距和填充样式。

CSS flex item的主轴对齐方式

2 个答案: