CODEWITHSUNDEEP
htmlcssflexboxcss-grid
Dan
Dan

Reputation: 1660

aligning the last object in css-grid or flexbox

I'm trying to tidy up my code and I have a menu that I would like to organise a little better.

Is there a way of aligning the menu at the start, end or or center while having the last item in the menu aligned to the end?

I've currently stripped out everything and kept the basics. If I remove margin-top: auto from the last div, all items are aligned in the center as stated in the .menu css.

If I keep margin-top: auto from the last div, the last div is aligned where I want it but the other items are aligned at the top and not where it's supposed to.

Here's my code:

HTML

<div class="header">
  <div class="one">one</div>
  <div class="two">two</div>
</div>
<div class="menu">
  <div class="one">one</div>
  <div class="two">two</div>
  <div class="three">three</div>
</div>

CSS

.header{
  height:70px;
  background: red;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
}
.header .one {
  background: blue;
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem;
}
.header .two {
  background: green;
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem;
}

.menu {
  width:70px;
  height: 100vh;
  background: blue;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}
.three {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

.menu div:last-of-type {
  margin-top: auto;
}

Here it is in action: Fiddle

Upvotes: 0

Views: 50

Answers (1)

Juan-man
Juan-man

Reputation: 478

Add the following and this will work. You may want to add a padding to match your header, in this case 70px.

.menu {
  padding-top: 70px;
}
.menu div {
  margin-top: auto;
  margin-bottom: auto;
}
.menu div:last-of-type {
  margin-top: auto;
  margin-bottom: 0;
}

Upvotes: 2

Related Questions