A new Two-value syntax for display property🪄

#html #css #webdev #tutorial

Hey There, Plenty of CSS updates try to drain our infuriating level. Likewise, we aware of inline, block,inline-block ,flex, flex values of display property and a brand new way syntax helps to make new combinations. For instance, inline-flexor inline flex which seems little bit weird right. Uh, Don't worry which is not much complicated as you think about it😉.

Disclaimer: Recommended to use FireFox Developer Browser.

So, Hope continue reading and after you feel like,

Before move directly into two-value syntax. First, We need to mastering on outer and inner value. Then we make the undisturbed road to Two-value syntax.

Outer and Inner value

Outer value describe whether the parent is block-level or inline-level.

(Outer value technically call as Box Value).

Inner value describe how the children of that box behave (which means determine the formatting context of children).

I can get your thought. what is formatting context🤔??So, Just pause the inner and outer value topic for few seconds⏱️.

Formatting context means??. In simple terms, How they behave and there are several types of formatting context, including block formatting contexts, inline formatting contexts, flex formatting contexts.

For instance,

<p>Before that night—<strong>a memorable night</strong>, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”</p>

strong {
    margin: 20px;
    padding: 20px;
    border: 5px solid rebeccapurple;
}

The above example illustrate the inline formatting context. Just try to understand the behaviour of inline formatting context from above instance,

The box model does not fully apply to items participating in an inline formatting context(which means margin above and below the element will not be applied).
Horizontal padding, border and margin will be applied to the element and push the text away left and right.
Vertical padding and borders will be applied but may overlap content above and below.

Hope you grasped the inline formatting context. Just like that, other formatting context guys behave their own way. Make sense right💡.

Let's rebound to Outer and Inner value, if we declare as

.parent-container {
display: flex;
}

or we can rewrite as,

.parent-container {
display: block flex;
}

Actually Both are same. Haha, feels like

Nothing wrong with this display: block flex;. Because If we declare as display: flex which default outer value as block and inner value as flex.

Exactly means, when we use display: flex we create a block-level container (that is parent container will hold other element are stack on each other), with flex children (children participating in flex formatting contect).

For instance,

Observe carefully, The text "I can't join with them🥺" after the flex container reside like stack on each other pattern (not next to each other pattern).

If we want parent container behave as next to each other pattern, Just change the outer value. Can you guess what's that?? means change to inline??🤔.

If you guessed inline, You are right👏🏻👏🏻. Otherwise, not a giant problem. display: inline-flex or display: inline flex which convey the parent container behave as next to each other pattern.

For instance,

Now you get a clear impression with outer and inner value. So, Then what is two-value syntax??. Actually you already learned just before few seconds.

Single Value	Two Value
flex	block flex
inline-flex	inline flex
grid	block grid
inline-grid	inline grid
block	block flow
inline	inline flow

Two value syntax = explicitly define outer value and inner value

By this way, you can create more new combination values for display property.

Browser Support

Not 100% work on all browser. Which is in experimental mode, Expect to change the future CSS life😍.

If you loved this blog, Then give an endearing heart💝and drop your thought about this blog😍 which really a lot to me. I love the discussion with you, If you feel not comfortable at styling concepts or have any doubts.