2

I found many articles and tutorials but can't find specific mentions about this doubt. Does the use of flex imply that the element is also set to display: flex?

Or do I always need to specify the display property when using other flex properties? (will just setting flex: .. not have any effect without display: flex?)

And if it is in any way implicit, which elements would be set to display: flex? Just the flex container or also the flex items?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Kamafeather
  • 8,663
  • 14
  • 69
  • 99

1 Answers1

1

Using flex: properties on child elements (flex items) will have no effect unless the parent (flex container) is set to display: flex (or inline-flex).

Flex items - that is, the children of a flex container - do not need display: flex unless they are flex containers themselves with additional items in them that will be following flex styles.

Jon Uleis
  • 17,693
  • 2
  • 33
  • 42
  • 1
    I need to stop misreading things today. (No idea if you noticed my answer that's now deleted, but I confused the flex property to be one of flex containers, when it's actually a property of flex items...) – BoltClock Aug 17 '17 at 15:56
  • @BoltClock Haha, I was wondering where your answer went! Cheers. – Jon Uleis Aug 17 '17 at 15:57
  • Yes that's my case, a flex container (with ```flex:``` applied on it) that is at the same time a flex item. So, as BoltClock says, ```flex:``` is **exclusively** an item-property and has no effect on *flex-containers*, if these **are not** also *flex-items* at the same time. – Kamafeather Aug 17 '17 at 16:01
  • @BoltClock♦ Is it true that all elements have `flex` property even if parent doesn't have defined `display: flex` ? – Nenad Vracar Aug 17 '17 at 16:01
  • 1
    @Nenad Vracar: Yes, every element has some value of every property, because every property has an initial value, so there is never a property with *no* value (except custom properties). As another example, a display: none element retains all of its properties, even when its box is not rendered. – BoltClock Aug 17 '17 at 16:05
  • @BoltClock♦ Got it, so its there but it just doesn't work unless you set display flex on parent, also to prove your point https://jsfiddle.net/Lg0wyt9u/2182/ – Nenad Vracar Aug 17 '17 at 16:09
  • @Nenad Vracar: Yeah. Also, the spec's term for "doesn't work" is "doesn't apply" - the flex propdef says "Applies to: flex items" An element can have a computed value for a property, even when it does not apply. This is also why you might see a list-style on a ul - even though it's not itself a list-item, it keeps the value so that its list-item children can inherit from it. – BoltClock Aug 17 '17 at 16:10