Display:flex does not apply to elements

HTML-CSS
1

Hello fellow Campers; I have a small problem here: The display property(:flex) will not apply to the html elements. Attributes like color: and background: works fine. I used *{ margin:0auto;} instead to center the elements; but would like to know what am I doing wrong here :thinking:

any suggestions?

my css:

*{
    padding: 0;
    margin: 0;
    box-sizing:border-box;
}

body {
    height: 100vh; 
    display: flex;
    justify-content: center;
    flex-direction: column;
    background: linear-gradient(to right, #fceabb, #f8b500);
    color: white;
}

html:

<body>

        <div class="location">
            <h1 class="location-timezone">Timezone</h1>
            <p></p>

        </div>
        <div class="temperature">
            <h2 class="temperature-degree">24</h2>
            <div class="temperature-description">It is warm</div>
        </div>
        
        </body>
2

why not try to use display: inline-flex instead of display: flex .

your problem occurse because when using display: flex; you are giving it block-level-like property’s which doesn’t work here

3

display: flex makes the direct children of your container flex items. In your case your telling your <div>'s which are children of your <body> to be flex items and not elements inside them. So that’s basically the 2 <div>'s that you used to be containers of the texts. if you make each or either of those <div>'s display: flex then centering them will work. Hope this helps.

2 Likes
4

It does apply. I just tested it. What were you hoping it would look like? if you want to see them stacked next to each other change flex-direction to row;

5

I assumed he was trying to center the text elements.

6

Oh! My bad, and your assumption is most correct. thanks:+1:

2 Likes
7

although he could use align-items: center;, it won’t solve his problem 100%, or get the look he wants.

EDIT: and using text-align: center will actually solve his problem too. But I think he’s trying to learn display: flex so my first answer would be the direct answer to his problem. :smiley:

8

Thank you so much @djma777 , problem solved! :tada:

1 Like
9

You’re welcome! :smiley: