flex-wrap-layout

flex-wrap-layout

Experimentations with flexbox and flex-wrap: wrap to get rid of the classic and limited 12 columns grid (e.g. things like .col-md-6 { width: 50% }).

Web technologies (HTML, CSS, JavaScript) are now used for creating complex GUIs (web apps vs web sites). Desktop tools and libraries like Qt have elegantly solved the problem for decades.

Usage

yarn add flex-wrap-layout or npm install flex-wrap-layout

Import layout.scss or flex-wrap-layout.scss:

$layout-item-margin-y: $form-group-margin-bottom;
$layout-item-margin-x: $form-group-margin-bottom;
@import '~flex-wrap-layout/src/layout';

If you need to detect CSS flex wrap:

import { detectRowWrap } from 'flex-wrap-layout';

Examples

detectRowWrap() example

https://codepen.io/tkrotoff/pen/pWzKqZ

HTML form example

<form vspace>
  <div layout="row" hspace vspace>
    <div layout="column" vspace grow>
      <div layout="row">
        <label for="firstname" offset-with-content>First Name</label>
        <input id="firstname" grow>
      </div>

      <div layout="row">
        <label for="lastname" offset-with-content>Last Name</label>
        <input id="lastname" grow>
      </div>
    </div>

    <div layout="column" vspace grow>
      <div layout="row">
        <label for="arrival" offset-with-content>Arrival</label>
        <input type="date" id="arrival" grow>
      </div>

      <div layout="row">
        <label for="departure" offset-with-content>Departure</label>
        <input type="date" id="departure" grow>
      </div>
    </div>
  </div>

  <div layout="row">
    <div grow></div>
    <div layout="row" hspace vspace>
      <button>Save</button>
      <button>Cancel</button>
    </div>
    <div grow></div>
  </div>
</form>

API

layout="row"

Lines up child elements horizontally (QHBoxLayout equivalent).

<1> <2> <3>

layout="column"

Lines up child elements vertically (QVBoxLayout equivalent).

<1>
<2>
<3>

grow

Grows the element if extra space is available, the element won't shrink below its natural width (QSizePolicy equivalent).

• Without grow:

| <1> <2> <3>         |

• Element 1 with grow attribute:

| <    1    > <2> <3> |

Element 1 fills the extra space if any

• Elements 2 and 3 with grow attribute:

| <1> <  2  > <  3  > |

Elements 2 and 3 share the extra space if any

vspace

Vertical space (margin-bottom) between child elements (QLayout::spacing equivalent).

<1>  instead of  <1>
                 <2>
<2>              <3>

<3>

hspace

Horizontal space (margin-right) between child elements (QLayout::spacing equivalent).

<1> <2> <3> instead of <1><2><3>

Spacer (<div grow></div>)

Stretchable blank space (QSpacerItem equivalent).

| <1> <2>   <->   <3> |
| <1> <-> <2> <-> <3> |

Limitations

I would like to right-align the labels of a form:

| <    label> <input> |  instead of  | <label    > <input> |
| <    label> <input> |              | <label    > <input> |

Unfortunately it is not possible to detect when an element is wrapped in CSS:

| <    label> |  instead of  | <label    > |
| <input>     |              | <input>     |
| <    label> |              | <label    > |
| <input>     |              | <input>     |

This would also solve other problems (all of them?).

To work around this, detectRowWrap() is a JavaScript function that detects when an element is wrapped and lets you define the CSS that goes with it.

Build and run

yarn build:examples:watch
open build/examples/demo.html