A new Two-value syntax for display property🪄
Tags: html, css, webdev, tutorial
Published: 2022-01-08 14:14:01

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

><em><b>Disclaimer:</b> Recommended to use <a href="https://www.mozilla.org/en-US/firefox/developer/?utm_source=wesbos&utm_campaign=cssgrid&utm_content=web">FireFox Developer Browser</a>.</em>

So, Hope continue reading and after you feel like,
 ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/26n83q4tpswrve2a21e4.gif)
Before move directly into two-value syntax. First, We need to mastering on <b>outer and inner value</b>. Then we make the undisturbed road to Two-value syntax.</em>

<h1>Outer and Inner value</h1>
 - Outer value describe whether the parent is <code>block-level</code> or <code>inline-level</code>.

> (<em>Outer value technically call as <b>Box Value</b></em>).

- Inner value describe how the children of that box behave (<b>which means determine the formatting context of children</b>).

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

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

For instance,
```html
<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>
```
```css
strong {
    margin: 20px;
    padding: 20px;
    border: 5px solid rebeccapurple;
}
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pl0dt5y24buqs2buqegc.png)
 
The above example illustrate the <b>inline formatting context</b>. 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 <code>margin</code> above and below the element will not be applied).
- Horizontal <code>padding</code>, <code>border</code> and <code>margin</code> will be applied to the element and push the text away left and right.
- Vertical <code>padding</code> and <code>borders</code> 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
```css
.parent-container {
display: flex;
}
```
or we can rewrite as,
```css
.parent-container {
display: block flex;
}
```
Actually Both are same. Haha, feels like
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yjcwy8opa21kljm2qf3c.gif)
Nothing wrong with this <code>display: block flex;</code>. Because If we declare as <code>display: flex</code> which default <b>outer value</b> as <code>block</code> and <b>inner value</b> as <code>flex</code>. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b522lkzb4gkyjg99a83y.png) 
Exactly means, <b>when we use <code>display: flex</code> 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)</b>. 

For instance, 
{% codepen https://codepen.io/preethi-dev/pen/YzrjmwQ %}

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. <code>display: inline-flex</code> or <code>display: inline flex</code> which convey the parent container behave as next to each other pattern.

For instance,
{% codepen https://codepen.io/preethi-dev/pen/OJxwKZa %}

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
> <em>By this way, you can create more new combination values for <code>display</code> property</em>.

## Browser Support
Not 100% work on all browser. Which is in experimental mode, Expect to change the future CSS life😍.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/baf3u1l6eb32gx0qs5wg.png) 
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.

If you not experiment with <b><a href="https://dev.to/preethi_dev/automatic-enabling-dark-modecss-only-2m1h">Auto Enabling dark mode(CSS only)</a></b>, Start to explore now.

Thanks for Reading!!
<a href="https://dev.to/preethi_dev"><b>Preethi</b></a>
<em>- Make your CSS life easier</em>