Flex child properties not allowed for inline-flex elements.

[peeke]

All flex child properties that are allowed to be used inside elements with display: flex; should also be allowed for elements with display: inline-flex.

[EECOLOR]

Hmm, this is one of those spots where CSS and the component world collide.

• parent states: you behave inline - .parent { & > .child { display: inline } }
• child states: I want my children to be in a flex layout - .child { dispay: flex }

As you can see this causes a conflict. A solution would be to have (as you suppose) display: inline-flex. This however causes a problem:

• The parent should know nothing about the internals of the child component so it should not tell it how to lay out it's children
• The child should not know about it's parent and should not state how it behaves

Thinking about it, it should be set on the child, not from the parent. I think the rules reflect this correctly, the library prevent parents from setting the display property of a child to anything other than none.

If CSS would allow us to only affect the part for the outside of the component (the part before the -) we could set it from parents (& > .child { display: inline-* }). Children should be able to state display: *-flex. Until that time, it's too brittle to allow setting this from parents.

The workaround is to have 2 child components, one with display: inline-flex the other with display: block-flex.

CC: @JoostKiens

[peeke]

I created this issue in a bit of a rush, so let me clarify a bit. I'm not sure we're talking about the same situation.

When I type the following css, I get a linting error:

missing display: flex;
order can only be used when the containing root rule has display: flex;

.component {
  display: inline-flex;
  
  & > .child {
    order: -1;
  }
}

I would have expected this to be allowed, since

.component {
  display: inline-block;
}

and

.component {
  display: flex;

  & > .child {
    order: -1;
  }
}

are allowed.

[EECOLOR]

Ahh right, yeah. This rule should indeed allow that: https://github.com/kaliberjs/build/blob/master/library/stylelint-plugins/rules/parent-child-policy/index.js

Are there any other combinations (block-flex, inline-grid maybe)?

[JoostKiens]

The legacy display props, which accept several flex/grid child rules, are:

display: grid | inline-grid | flex | inline-flex;

According to the spec these are considered legacy, but they are what we use.

The modern way uses two keywords; first one for the outside, the second one for the inside.
For example:

display: inline flex;
display: block grid;

And also some newer properties, eg:

display: inline flow;
display: run-in grid;

But we haven't used that style in production yet (afaik)
https://developer.mozilla.org/en-US/docs/Web/CSS/display

By the way, this is related: #205. I haven't been able to get the tests working, but perhaps we can solve this at the same time?