Flexbox align-items with justify content and display flex without flex property?

HTML-CSS
1

Hey all!

Guys if set only this options:

align-items: center;
display: flex;
justify-content: flex-start;

without flex property what is default set for that? grow shrink basis is fine but if not set flex: 1 1 0; what is default? and always need flex property or just display flex?

thx

2

The flex property applies to the contents of the flex container, not the container itself. So there’s no need to add a flex property.

Anyway the default value for flex is 0 1 auto

3

Thanks!

Still you know about for container not but for parent elements allow to set align-self: center; ? who also got display: flex; ?

like

.container{display:flex;align-items: center; justify-content: center;}
.parent{display:flex; align-self: center;justify-content: center;align-items: center;}

4

Even flex containers themselves can also be flex items.

Sorry I’m not quite sure I understand your question

5

Sure you can set a parent who has a display of flex as a flex-item of another parent who has display of flex as well!

like so:

<div class="container">
    <div class="parent">
        <div class="child">
        </div>
    </div
</div>

 .container{
display:flex
}
 .parent{
display:flex
}
 .child{
display:flex
}

ill Tell you it would still work even if you have a thousand of indirect parents of that element!

1 Like