Flexbox Align-items does not work

Asked

Viewed 918 times

1

I’m having a problem, I don’t quite understand the concept of Align-items in flexbox, I don’t know why it’s not working, follow code:

<div style="display: flex; align-items: center; justify-content: center">
    <div style="background-color: red; height: 250px; width: 250px">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid animi architecto beatae
            debitis dignissimos dolore et id magnam molestias nisi perferendis perspiciatis,
            qui quis quo quod sed vero voluptas voluptatum.</p>
    </div>
</div>
css web-application flexbox alignment

1 answer

1


Dude is all working right. The "problem" is that your container Dad has no height, so don’t line up...

Look at your code, just putting height on the father container and an edge for you to visualize better.

OBS: Like the container is a div There is already 100% wide. So initially the son was already in the center of the father.

<div style="display: flex; align-items: center; justify-content: center; height: 500px; border:1px solid red;">
	<div style="background-color: red; height: 250px; width: 250px">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid animi architecto beatae
			debitis dignissimos dolore et id magnam molestias nisi perferendis perspiciatis,
			qui quis quo quod sed vero voluptas voluptatum.</p>
	</div>
</div>

  • I think he wanted to align the text on the red div. D

  • So by default the elements have to be set at the correct height and width? To be able to work with display: flex.

  • 1

    @Rafaelbalmant not necessarily as you saw it. In its code the element was already centered horizontally because the DIV had by default the width of 100% of the screen. Then the justfy-contented worked as expected. For you to align vertically it is necessary to have some height set somewhere, because as you will align in the center of 0. Even if the height of the father is 100%, or 100VH or something like that it is important that it has some value... And the alignment with flex is always the alignment of the child in relation to the father. Father with Flex, ai vc aligns the Son with the properties of flex.

  • 1

    ...continuing @Rafaelbalmant and when the Father has flex the son tb gains some properties to align individually within the father, are the propriedads ended in -self type, aling-self or justfy-self

  • @Sam when I hit my eye and I thought it was this rss, but after I saw that the styles were in the container of "out" I called it could be as I mentioned in the reply...

  • @hugocsl, got it. Thank you so much for the help gave a monstrous help here. Really worth :)

  • 1

    @Rafaelbalmant inclusive, se vc recortar os estilos Flex do container Pai, e colar junto dos estilos Filho, box vermelho, vc vai ver que o texto tb vai alinhar no centro do box. I’m glad I did. after a look at this guide https://css-tricks.com/snippets/css/a-guide-to-flexbox/

  • @Rafaelbalmant If my reply has helped you in any way consider marking it as Accept, in this icon ✔ below the arrows on the left side of my answer :) so the site does not get open questions pending without accepted answer. Abs

Show 3 more comments

Browser other questions tagged css web-application flexbox alignment

You are not signed in. Login or sign up in order to post.