如何对齐项目在顶部和底部的侧边栏与flexbox?

Question

我基本上想有一个侧边栏看起来像Visual Studio Code中的侧边栏。上面有按钮，下面有两个按钮。我做了一个侧边栏，但我只能在侧边栏的顶部或底部定位所有项目，但我想要两者。我想要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

要得到你想要的，应用margin-top: auto;的第一个元素，应该是"bottom-group"的一部分，并保持justify-content设置在其默认值(即没有定义该设置)。另外，你需要为伸缩容器定义一个高度，否则默认情况下，它只会添加高度所有子容器的(我将其设置为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 2

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 3

这是一个简单的答案，你可以玩周围学习使用flexbox

你可以玩这个游戏来增加你的信息。

* {
  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>