CODEWITHSUNDEEP
htmlcssflexboxsidebar
swftowu69
swftowu69

Reputation: 363

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

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

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

Upvotes: 0

Views: 3824

Answers (3)

Johannes
Johannes

Reputation: 67748

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

Upvotes: 1

Mohamed Sabry
Mohamed Sabry

Reputation: 3183

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

Upvotes: -1

user4613007
user4613007

Reputation:

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/

Upvotes: -1

Related Questions