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

I basically want to have a Sidebar that looks like the SideBar in Visual Studio Code. There you have Buttons on top and also 2 Buttons at the bottom. I made a Sidebar but I am only capable of positioning all Items at the top OR the Bottom of the Sidebar, but I want both. I want that 3 Items are on the Top and 2 Items are on the bottom.

Here is my 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);
}

In my html I have something like this.

<div >
  <button >A</button>
  <button >B</button>
  <button >C</button>

  <button >Y</button> <-- this Item should be on the bottom -->
  <button >Z</button> <-- this Item should be on the bottom -->
</div>

I somehow have to tell my Items how they need to be aligned but I am not sure.

CodePudding user response：

The align-items property is related to CSS layout. It effects how elements are aligned both in Flexbox and Grid layouts.

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

In your case:

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

source: https://css-tricks.com/almanac/properties/a/align-items/

CodePudding user response：

This is a simple answer you can play around to learn using flexbox.

You can play This Game for enhance your informations.

* {
  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 >
  <div >
    <button >A</button>
    <button >B</button>
    <button >C</button>
  </div>

  <div >
    <button >Y</button>
    <button >Z</button>
  </div>
</div>

CodePudding user response：

To get what you want, apply margin-top: auto; to the first element that should be part of the "bottom-group", and leave the justify-content setting of the flex container at its default (i.e. no definition for that setting). Also, you need to define a height for the flex container, otherwise it will only have the added height of all its children by default (I made it 100vh, i.e. full viewport height, but adjust that as needed):

(note: view the snippet in full page view, otherwise it's not high enough to show the desired result)

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 >
  <button >A</button>
  <button >B</button>
  <button >C</button>

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