Menu
On my CSS pages Visual Studio doesn't recognize flex, claiming it's not valid:
div {
display: flex;
display: inline-flex;
}
It does however recognize flexbox :
div {
display: flexbox;
display: inline-flexbox;
}
Flexbox does not seem to be supported in any of the main browsers, yet flex is. Can anyone explain this?
Thanks.
619
Flexbox is a purely css layout, which means the entire layout is manage and control at css level, no need to play with the markups. Flex model is capable to adjust its items height/width to best fill in the available space of container.
To activate Flexbox we simply use a CSS selector to select the parent div that contains the six children, then write display: flex; . By default Flexbox arranges the children in a horizontal row. That can be changed however by adding flex-direction: column to the parent class.
The display:inline-flex does not make flex items display inline. It makes the flex container display inline. The main difference between display: flex and display: inline-flex is that display: inline-flex will make the flex container an inline element while its content maintains its flexbox properties.
flex and inline-flex were, at one point in time, flexbox and inline-flexbox respectively. The new values represent an entirely new definition of the Flexbox module, and browser implementations have moved on with these new values.
Either the old values were current at the time VS2013 was released, or if not, then VS2013 shipped with an out-of-date CSS validator.
Note that the W3C Jigsaw CSS validator has been updated to recognize the new values and consider the old values invalid.
189
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
