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-flex
or 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
orinline-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
andmargin
will be applied to the element and push the text away left and right. - Vertical
padding
andborders
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.
If you not experiment with Auto Enabling dark mode(CSS only), Start to explore now.
Thanks for Reading!!
Preethi
- Make your CSS life easier
Top comments (1)
One particular idea to note is that Firefox supports
display: inline list-item
, a value that only exists in two value syntax.