Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

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

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6669e7b
flex: add base-size hacks for obsolete browsers
buschtoens Aug 10, 2012
7fadc81
flex: insert base-size hack in flexed elements
buschtoens Aug 10, 2012
9805999
flex: improves basic-size hack and adds flex-basis
buschtoens Aug 10, 2012
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 28 additions & 5 deletions lib/nib/flex.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,6 @@ align-content()
align-self()
vendor('align-self', arguments, only: webkit official)

flex-basis()
vendor('flex-basis', arguments, only: webkit official)

flex-shrink()
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moved down to translated section.

vendor('flex-shrink', arguments, only: webkit official)

Expand All @@ -43,21 +40,47 @@ align-items(align)
// new
vendor('align-items', arguments, only: webkit official)

flex(growth)
flex(growth, shrink = null, basis = null)
// obsolete
vendor('box-flex', growth)
if growth == "none" // flex: none
vendor('box-flex', 0)
width: auto
height: auto
else if basis != null // flex: <'flex-grow'> <'flex-shrink'> <'flex-basis'>
vendor('box-flex', growth)
width: basis
height: basis
else if shrink != null // flex: <'flex-grow'> <'flex-shrink'> || <'flex-grow'> <'flex-basis'>
vendor('box-flex', growth)
if unit(shrink) != "" // flex: <'flex-grow'> <'flex-basis'>
width: basis
height: basis
else // flex: <'flew-grow'>
vendor('box-flex', growth)

// new
vendor('flex', arguments, only: webkit official)

flex-basis(basis)
// obsolete
width: basis
height: basis
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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!


// new
vendor('flex-basis', arguments, only: webkit official)

flex-direction(direction)
// obsolete
if row-reverse == direction || column-reverse == direction
vendor('box-direction', reverse, ignore: official)
if row == direction || row-reverse == direction
vendor('box-orient', horizontal, ignore: official)
>*
height: auto !important
else if column == direction || column-reverse == direction
vendor('box-orient', vertical, ignore: official)
>*
width: auto !important

// new
vendor('flex-direction', arguments, only: webkit official)
Expand Down