Flexbox align-items issue

[camaguncoso]

Greetings. I completed the Photo Gallery project here, it was about learning flexbox. Then I decided to do a small project on the side to check if I understand flexbox and all the properties and value within CSS flexbox. I came across a problem with align-items when I wanted to center the flex-items. It doesn’t work. Things like justofy-content do work as I am able to see the changes. I read an article here on freecodecamp and I tried to apply myself

I there’s something I need to be aware of, please let me know. Below is my code:

HTML:

 <div class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
    <div class="child3"></div>
  </div> 

CSS:

* {

box-sizing: border-box;

}

.parent {

display: flex;

justify-content: center;

align-items: center;}


.parent div {

width: 70px;

height: 70px;}



.child1 {

background-color: darkmagenta;

}



.child2 {

background-color: deepskyblue;

}


.child3 {

background-color: darkorange;

} 

[ILM]

Please update your post so that the code is readable.

When you enter a code block into a forum post, please precede it with three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add the backticks.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

[dhess]

when you don’t specify a flex-direction, items are laid out left to right (on the main axis) by default and justify-content is used for that horizontal alignment. align-items would then apply to the vertical alignment of the items.

[camaguncoso]

Seems like this backticks only works for HTML not CSS?

[ILM]

the backticks need to be on their on line to work

```
code here
```

[dhess]

I’ve edited your code for readability.

[ILM]

can you share a codepen or similar with your code?

I see the items centered, I don’t understand what issue you are having

[camaguncoso]

Vertically they are not centered. Align-items deals with cross axis (vertical)

```

.parent {

display: flex;

justify-content: center;

align-items: center;}
```

[dhess]

Maybe this reference will explain better: A Complete Guide to CSS Flexbox | CSS-Tricks

Try making your items on the main axis different heights: remove height from the .parent div selector and set different heights inside the .child selectors.

Then you will see what align-items is doing.

If you want to center all the items on the page, try adding:

height: 100 vh; 
margin: auto;

to your .parent selector.

[ILM]

add a border to the parent element, and you will notice its height, and that they are centered for what they can be centered without vertical space

[camaguncoso]

Thank you for the link. I added the height and it worked