use shorthand properties

[yukulele]

Playground could use shorthand properties like:

• flex-flow
• place-content
• place-items
• place-self
• flex

Example:

.container {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
	align-content: center;
}

could be shortened to:

.container {
	display: flex;
	flex-flow: column wrap;
	place-content: center;
}

[mikemcbride]

Hi! Thanks for your interest in this project. I agree, it could be shortened, but I think it also comes with some downsides. First, being verbose helps people learn a good foundation of layouts with flexbox. You learn the individual properties first, and then start combining them into shorthand if you want. Secondly, the implementation of this would feel rather clunky. For example, the flex-flow property would either need two separate dropdowns, or one dropdown with all permutations of available options. I think the current implementation, while more verbose in terms of properties, exposes them in a way that makes it very straightforward to both see what impact they have on the current layout and eliminate confusion.

I'm curious what benefits you think using these shorthand properties would provide - could you elaborate? What would you envision the implementation look like?

[yukulele]

The forms could look like this:

container form:

• flex-flow
  • flex-direction row ⯆
  • flex-wrap no-wrap ⯆
• place-content
  • justify-content flex-start ⯆
  • align-content flex-start ⯆
• place-items
  • justify-items flex-start ⯆
  • align-items flex-start ⯆

items form:

• order 0 ⇳
• flex
  • flex-grow 0 ⇳
  • flex-shrink 0 ⇳
  • flex-basis auto
• place-self
  • justify-self flex-start ⯆
  • align-self flex-start ⯆

This allows a clear understanding of which properties a shorthand property corresponds to.

On the "markup" view, I suggest to add an option (checkbox) "do not use shortand properties"

what do you think?

[mikemcbride]

Ok I see where you're headed. So maybe in the form we put section headings to divide it up, and then allow the option for shorthand in the markup... I dig it. Let me hack around on this with @davidleininger and see what we come up with! Thanks for the feedback, we appreciate it!