如何在带有 flexbox 的边栏中对齐顶部和底部的项目？

Question

我基本上想要一个看起来像 Visual Studio 代码中的边栏的边栏。顶部有按钮，底部有 2 个按钮。我制作了一个侧边栏，但我只能将所有项目定位在侧边栏的顶部或底部，但我两者都想要。我想要 3 个项目在顶部，2 个项目在底部。

这是我的 CSS:

.sidebarleft {
  background-color: rgb(25, 20, 26);
  display: flex;
  flex-direction: column;
  flex: 0 0 50px;
}

.sidebarleft-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50px;
  border: none;
  background-color: inherit;
  color: rgb(100, 110, 122);
}

在我的 html 我有这样的东西。

<div class="sidebarleft">
  <button class="sidebarleft-button">A</button>
  <button class="sidebarleft-button">B</button>
  <button class="sidebarleft-button">C</button>

  <button class="sidebarleft-button">Y</button> <-- this Item should be on the bottom -->
  <button class="sidebarleft-button">Z</button> <-- this Item should be on the bottom -->
</div>

我必须以某种方式告诉我的项目它们需要如何对齐，但我不确定。

Answer 1

align-items 属性与 CSS 布局有关。它会影响元素在 Flexbox 和 Grid 布局中的对齐方式。

.container {
  display: flex;
  align-items: flex-start;
}

你的情况：

.sidebarleft {
  background-color: rgb(25, 20, 26);
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  flex: 0 0 50px;
}

来源： https://css-tricks.com/almanac/properties/a/align-items/

Answer 2

要得到你想要的东西，请将 margin-top: auto; 应用到应该属于“bottom-group”的第一个元素，并将 flex 容器的 justify-content 设置保留在它的位置默认（即没有对该设置的定义）。此外，您需要为 flex 容器定义一个高度，否则默认情况下它只会添加其所有子容器的 height（我将其设置为 100vh，即全视口高度，但调整根据需要）：

（注意：在整页视图中查看代码段，否则它的高度不足以显示所需的结果）

html, body {
  margin: 0;
}
.sidebarleft {
  background-color: rgb(25, 20, 26);
  display: flex;
  flex-direction: column;
  flex: 0 0 50px;
  height: 100vh;
}

.sidebarleft-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50px;
  border: none;
  background-color: inherit;
  color: rgb(100, 110, 122);
}
.sidebarleft-button:nth-child(4) {
  margin-top: auto;
}

<div class="sidebarleft">
  <button class="sidebarleft-button">A</button>
  <button class="sidebarleft-button">B</button>
  <button class="sidebarleft-button">C</button>

  <button class="sidebarleft-button">Y</button>
  <!-- this Item should be on the bottom -->
  <button class="sidebarleft-button">Z</button>
  <!-- this Item should be on the bottom -->
</div>

Answer 3

这是一个简单的答案，您可以尝试使用 flexbox 来学习。

您可以播放This Game来增强您的信息。

* {
  margin: 0;
  padding: 0;
}

.sidebarleft {
  background-color: rgb(25, 20, 26);
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 0 0 50px;
  height: 100%;
  padding-left: 50px;
  padding-right: 50px;
}

.sidebarleft-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50px;
  padding: 15px;
  border: none;
  background-color: inherit;
  color: rgb(100, 110, 122);
}

<div class="sidebarleft">
  <div class="sidebar-upper">
    <button class="sidebarleft-button">A</button>
    <button class="sidebarleft-button">B</button>
    <button class="sidebarleft-button">C</button>
  </div>

  <div class="sidebar-bottom">
    <button class="sidebarleft-button">Y</button>
    <button class="sidebarleft-button">Z</button>
  </div>
</div>

如何在带有 flexbox 的边栏中对齐顶部和底部的项目？

How to align Items at the top and on the bottom in a Sidebar with flexbox?

html

css

flexbox

sidebar