0

https://codesandbox.io/s/romantic-proskuriakova-q5w4ik?file=/src/styles.css

I have the following html

    <div id="container">
      <div>A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
      <div id="end">E</div>
    </div>

with the following css

#container {
  height: 500px;
  border: 1px solid red;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#end {
  justify-self: end;
  color: red;
}

how can I put "E" at the bottom of the container??

I don't want to use position relative and absolute because I need this to be responsive.

I want to have everything centered expect the div containing the letter E

khanmohtashim22
  • 26
  • 2

1 Answers1

0

From what I understood you want A, B, C, D to be centered and E at the bottom. The problem is you gave the #container instructions to display: flex and justify-content: center, but when you make it display: flex it also applies that to its children. So #end was centered and it would not take justify-self: flex-end.

You can fix this by making ABCD into its own group and separating it from E applying justify-content: space-between.

Heres the code if it didnt make sense:

HTML:

<body>
<div id="container">
  <div id="group-container">
    <div>A</div>
    <div>B</div>
    <div>C</div>
    <div>D</div>
  </div>
  <div id="end">E</div>
</div>

CSS:

#container {
  height: 500px;
  border: 1px solid red;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#group-container{
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
}

#end {
  color: red;
}

min-height was applied to make the space for space-between to work. Flexbox may be confusing but check out Kevin Powell videos on flexbox on Youtube, he explains everything you need very well.

CodeyBrodey
  • 1
  • 2
  • Codey this does not give me attended result. However I played around with your solution. And if I give #group-container{ margin: auto 0 } then this works. – khanmohtashim22 May 14 '23 at 18:44