flex: basis-size and full flex shorthand support #118

Open
wants to merge 3 commits into
from

Conversation

Projects
None yet
3 participants
Contributor

buschtoens commented Aug 10, 2012

New translations!

basis-size now works with a width / height hack.

flex now works as complete as possible. It supports all shorthand syntax versions defined in MDN and interprets <'flex-grow'> and <'flex-basis'>. We can't support <'flex-shrink'> due to technical limitations of the old specifications.

New properties, that are still untranslated:

  • align-content
  • algin-self
  • flex-shrink
  • flex-wrap
  • justify-content
@@ -20,9 +20,6 @@ align-content()
align-self()
vendor('align-self', arguments, only: webkit official)
-flex-basis()
@buschtoens

buschtoens Aug 10, 2012

Contributor

Moved down to translated section.

+flex-basis(basis)
+ // obsolete
+ width: basis
+ height: basis
@buschtoens

buschtoens Aug 10, 2012

Contributor

width or height get replaced with width / height: auto !important in flex-direction.

Downsides

  • It's a hack.
  • Possible width or height values get overwritten. But that isn't too bad, since one should not use width or height in FlexBox. flex is prefered.
  • You have to define flex-direction. Otherwise your page is filled with squares. Besides that you should always define flex-direction to be more explicit.

Upsides

  • It works! The page looks exactly the same in new and obsolete browsers.
  • It's transitionable / animateable, too!

@buschtoens buschtoens referenced this pull request Aug 14, 2012

Closed

display box #23

Owner

tj commented Aug 14, 2012

anyone have comments on this? I haven't fooled with the flex-box stuff much yet, last time I checked it was pretty buggy in general

Contributor

buschtoens commented Aug 15, 2012

Can I use FlexBox? (Dark green: obsolete and/or buggy, Light green: new)

The obsolete model is relatively well supported (still buggy in some browsers). The new one isn't, but will be in the future and is the definitive way to go.

But of course, I'd like to hear further opinions on this!

Contributor

caseywebdev commented Aug 22, 2012

I think you'll need to add @import 'flex' to lib/nib/index.styl. I cloned your repo and once I made that change it worked fine.

Contributor

buschtoens commented Aug 22, 2012

Yup, you're right. I didn't add this file to the commit. Do you want to PR or shall I do it?

Contributor

caseywebdev commented Aug 22, 2012

I just created one at #126

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment