flexbox-style v0.8.3

raw flexbox

Flexbox is a modern way to control element positioning. I tried using bootstrap@4.0/flexbox.scss but they know something I don't: flex-direction: column is missing in that file...

'Flexbox is slow, unsupported and bla, bla bla'. Ok.

api

Just this one file flexbox.scss

how to use

1. Read any flexbox guide
2. Apply it, and eveerything's Ok
3. ... 'Wait a minute, when I say flex:1, flex:3: flex:1 for items, they are not always using these proportions...!'
4. Exactly, flex-grow and flex-shrink split REMAINING width/height, after the item's content has influenced size
5. 'But I want both mechanics: split as I say (1 2 1 proprions) or use default behaviour - content first, 1 2 1 for remaining space!'
6. That is where simple magic comes in Magic explained
7. In short: every flex column item should have height 0, flex row item - width 0 -> 'My width/height is zero. Now let's take flex container's width/ height and split it exactly as propotions define, disregarding content'

So when you make layout and want default behaviour (which is almost always what we want, because content should go first), you simply write like ="flexcol" and ="flexitem-1" ="flexitem-2" ="flexitem-1". And when you want rigid grid (like table) with exact proportions you write like ="flexrow" and ="rowitem-1" ="rowitem-2" ="rowitem-1" Don't forget: to take benefit of flx-grow + width/height=0 combo, flex item should stretch (by default, flex container's align-items is already stretch). So if you change that, don't foreget amazing align-self: stretch on an item - then combo works.

.flexcol-wrap {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.jc-around{
  justify-content: space-around;
}
.colitem-7 {
  flex: 7 7 auto;
  height:0;
}
.rowitem-2{
  flex: 2 2 auto;
  width: 0;
}
.flexitem-2 {
  flex: 2 2 auto
}

....

<link rel="stylesheet" href="https://unpkg.com/flexbox-style@latest/flexbox.min.css" />

 `$ npm install flexbox-style`

    require('flexbox-style'); // scss
    same as
    require('flexbox-style/flexbox.min.scss');
    same as
    import 'flexbox-style'; // scss
    same as
    import 'flexbox-style/flexbox.min.scss';

    or
    import 'flexbox-style/flexbox.min.css';
    same as
    require('flexbox-style/flexbox.min.css');

! if you compile using post-css, make sure styles are not hashed (see PostCSS )

Build

• make sure NodeJS is installed

 `$ npm install`
 `$ node build` or `$ npm run build` # --outputStyle option-here

--outputStyle nested, expanded, compact, compressed (default: all);

License

MIT