Align-items not working :: Help Needed

[Chirashankar6]

Hi All,

Display: flex,align-items: center, align-items: flex-end, align-items: end - None of them work.

Here’s my HTML -

<div class="container"> 
<div class="container1"></div>
<div class="container2"></div>
</div>

CSS-

.container{
display: flex;
 align-items: center;
}
 .container1{
width: 50px;
height: 50px;
background-color: blue;
border: 2px red solid;
}
 .container2{
width: 50px;
height: 50px;
background-color: blue;
border: 2px red solid;
}

[piedcipher]

Please use code formatting to post HTML. You need to use backticks.

[marco.hadzija2002]

Where is your html Code?
Fact is, you have only two containers, this will not working,becouse you need three of them, look at the following example:

<div class="container0">
         <div class="container1"></div>
         <div class="container2"></div>
</div>

<style>
       .container0 {
                display:flex;
                height:500px; <-- height must be selected when there is a value on 
                                                         align-items!
                width:500px; <-- width must be always selected when there is a 
                                                      display:flex
       }
       .container1 {
                  width:250px;
                  height:100%;
                  background:Red;
}
       .container2 {
                  width:250px;
                  height:100%;
                  background:blue;
}
</style>

[ilenia]

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

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

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