Flex None

Glenn Blog Leave a Comment

CSS Flex Box is a great way to create fluid layouts (horizontal & vertical), but sometimes you don’t want the Flex display property to filter down to all child elements. In this case you need to set the Flex to none on the child element you don’t want to flex. The CSS is very simple:-

flex: none;

This is equivalent to

flex: 0 0 auto;

and that is shorthand for:-

flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;

And you could link this up with:-

display: block!important

An example for using this could be on a Google Map that has a flex parent. You want the Google Map as a display: block; with no flex so add the above to its container.

About the Author
flex none Flex None 0da77002febbfe28d15144a57bbcc2c9 s 180 d mm r g


A highly experienced Web Designer / Web Developer (Webflow, WordPress, Weebly & Custom), Front-end / Back-end Developer & New Media Specialist, with extensive knowledge of a wide spectrum of technologies in the Development and Creative Industries, built up over a number of years.