FlexBox Align-items does not work

Question

FlexBox Align-items does not work

Navigation

#1 by (1 votes)

1

I have a problem, I did not quite understand the concept of Align-items in flexbox , I do not know why it's not working,

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

asked by anonymous 28.11.2018 / 17:06

1 answer

(array) $ each; and open C ++ - Implementation of static class cpp

score 1 · Accepted Answer

Dude everything is working fine. The "problem" is that your container parent has no height, so does not line up ...

See your code, just placing height on the parent container and a border for you to see better.

OBS: As container is a div el already has 100% width. So initially the child 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>