Better-Flex.md

Better Flex

The problem

• display: flex is just display: block that assigns different flow to the children.
• display: inline-flex is just display: inline that assigns different flow to the children.

So why mess with block or inline at all!? Why not have a property that just assigns a different flow to the children??

The goal

input

div {
  flow: row;
}

output

div {
  display: flex;
  flex-flow: row;
}

---

input

div {
  display: inline;
  flow: row;
}

output

div {
  display: inline-flex;
  flex-flow: row;
}

Invalid without display?

CSS knows what display type gets inherited, but a pre-processor can't. To work around this limitation is it a good idea to always require the user to explicitly state the display type?

---

Due to the limitation mentioned above the following could be invalid if the user styled div to display: inline.

input

div {
  flow: row;
}

output

div {
  display: flex;
  flex-flow: row;
}

---

If this was implemented natively as part of the CSS specification, this would work fine and would be equivalent to the output.

input

div {
  display: inline;
}

div {
  flow: row;
}

output

div {
  display: inline;
}

div {
  display: inline-flex;
  flex-flow: row;
}

---

input

div {
  display: block;
  flow: row;
}

output

div {
  display: flex;
  flex-flow: row;
}

---

input

div {
  display: inline;
  flow: row;
}

output

div {
  display: flex-inline;
  flex-flow: row;
}