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

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?


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


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


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

Even flex containers themselves can also be flex items.

Sorry I’m not quite sure I understand your question

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">

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

1 Like