Confused, need help in understanding positions in css

HTML-CSS
1

image

Hello, so I was trying to replicate the image above.

Edited:
And here is the image of the current look of my html:
jwUP4R8.png (547×241) (imgur.com)

Here’s my code (html and css):
HTML

<!DOCTYPE html>
<html>
<head>
   <title>This is the document title</title>
   <link rel="stylesheet" href="style.css">
</head>
<body>
   <div id="flex-container">
      <p>div="flex-container"</p>
      <div id="flex-item-left">div="flex-item-left"</div>
      <div id="flex-item-middle">div="flex-item-middle"</div>
      <div id="flex-item-right">div="flex-item-right"</div>
   </div>
</body>
</html>

CSS

*{
   height: 200px;
   width: 500px;
}
#flex-container{
   display: flex;
   border: 1px solid black;
   padding: 10px;
}
#flex-container p{
   justify-content:flex-end; /* moves text over to the right */
   align-items:flex-end; /* moves text to the bottom */
}
#flex-item-left{
   margin: 0 5px;
   border: 1px solid black;
}
#flex-item-middle{
   margin: 0 5px;
   border: 1px solid black;
}
#flex-item-right{
   margin: 0 5px;
   border: 1px solid black;
}

The only problem is I do not know how to position the text

div=“flex-container”

at the bottom center just like the picture from the very top. What I did understood is that the justify-content is responsible for moving flex items horizontically while the align-items is for moving items vertically. Can anyone help me with this?

2

Hey there,

nice to meet you! :wave:

Your text div=“flex-container” is also an child element of <div id="flex-container">.

So your image should look like this:

1cae6c78e485c1be09cdb71e40757adba1725c8b

The outer (= black) box is a flex container from top to bottom (=column):

  • Its 1st inner (= red) child is a flex container from left to right (=row)
  • Its 2nd inner (= green) child is just a child
1 Like
3

Hello, thank you for answering. Sorry for this but my question was about how to make the p element position at the bottom center (just like in the pic of what I’m trying to imitate).

This is what my html looks like overall from the code above:
image

And this is what I came up with trying to position the p element to the bottom center but for a reason that I don’t know yet, it does not work. Can anyone enlighten me about this?

#flex-container p{
   justify-content:flex-end; /* moves text over to the right */
   align-items:flex-end; /* moves text to the bottom */
}
4

And I actually answered your question.

Your p is a box. It is the first box in your flex container.
You can’t use justify-content or align-items on child elements, just on the parent flex container.

1 Like
5

Sorry for that, I’m just really confused. Thank you for answering. Have a good day. :grin:

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.