A DSL for CSS3 flexbox

flexy.css

/*
  32 Combinations of CSS3 flexbox

  Usage Example: <div flex="↖-↗~"/> (row, wrap, align=flex-start + justify=space-between)
                 <div flex="|·">    (column, center + center)
                   <p flex="!"/>    (flex-grow: 1)
                 </div>

  1. row:             - (ALIGN  JUSTIFY)

                    +                    +                   +
  ↖ (start   start) | ↑ (start   center) | ↗ (start   end)   |   ↖ ↗ (start   between)
+-------------------+--------------------+-------------------+-------------------------+
  ← (center  start) | · (center  center) | → (center  end)   |   ← → (center  between)
+-------------------+--------------------+-------------------+-------------------------+
  ↙ (end     start) | ↓ (end     center) | ↘ (end     end)   |   ↙ ↘ (end     between)
+-------------------+--------------------+-------------------+-------------------------+
  ↖                 | ↑                  |                 ↗ |
  ↙ (stretch start) | ↓ (stretch center) |   (stretch end) ↘ |    +  (stretch between)
                    +                    +                   +
 */

[flex*="-"] {
  display: flex;
  flex-direction: row;
}

[flex*="-"][flex*="↑"] {
  align-items: flex-start;
  justify-content: center;
}

[flex*="-"][flex*="↗"] {
  align-items: flex-start;
  justify-content: flex-end;
}

[flex*="-"][flex*="→"] {
  align-items: center;
  justify-content: flex-end;
}

[flex*="-"][flex*="↘"] {
  align-items: flex-end;
  justify-content: flex-end;
}

[flex*="-"][flex*="↓"] {
  align-items: flex-end;
  justify-content: center;
}

[flex*="-"][flex*="↙"] {
  align-items: flex-end;
  justify-content: flex-start;
}

[flex*="-"][flex*="←"] {
  align-items: center;
  justify-content: flex-start;
}

[flex*="-"][flex*="↖"] {
  align-items: flex-start;
  justify-content: flex-start;
}

[flex*="-"][flex*="·"] {
  align-items: center;
  justify-content: center;
}

[flex*="-"][flex*="↖"][flex*="↙"] {
  align-items: stretch;
  justify-content: flex-start;
}

[flex*="-"][flex*="↑"][flex*="↓"], [flex*="-"][flex*="↕"] {
  align-items: stretch;
  justify-content: center;
}

[flex*="-"][flex*="↗"][flex*="↘"] {
  align-items: stretch;
  justify-content: flex-end;
}

[flex*="-"][flex*="↖"][flex*="↗"] {
  align-items: flex-start;
  justify-content: space-between;
}

[flex*="-"][flex*="←"][flex*="→"], [flex*="-"][flex*="↔"] {
  align-items: center;
  justify-content: space-between;
}

[flex*="-"][flex*="↙"][flex*="↘"] {
  align-items: flex-end;
  justify-content: space-between;
}

[flex*="-"][flex*="+"] {
  align-items: stretch;
  justify-content: space-between;
}

/*
  2. column:          - (ALIGN  JUSTIFY)

                    +                    +                   +
  ↖ (start   start) | ↑ (center   start) | ↗ (end   start)   |   ↖ ↗ (stretch   start)
+-------------------+--------------------+-------------------+-------------------------+
  ← (start  center) | · (center  center) | → (end  center)   |   ← → (stretch  center)
+-------------------+--------------------+-------------------+-------------------------+
  ↙ (start     end) | ↓ (center     end) | ↘ (end     end)   |   ↙ ↘ (stretch     end)
+-------------------+--------------------+-------------------+-------------------------+
  ↖                 | ↑                  |                 ↗ |
  ↙ (start between) | ↓ (center between) |   (end between) ↘ |    +  (stretch between)
                    +                    +                   +
 */

[flex*="|"] {
  display: flex;
  flex-direction: column;
}

[flex*="|"][flex*="↑"] {
  align-items: center;
  justify-content: flex-start;
}

[flex*="|"][flex*="↗"] {
  align-items: flex-end;
  justify-content: flex-start;
}

[flex*="|"][flex*="→"] {
  align-items: flex-end;
  justify-content: center;
}

[flex*="|"][flex*="↘"] {
  align-items: flex-end;
  justify-content: flex-end;
}

[flex*="|"][flex*="↓"] {
  align-items: center;
  justify-content: flex-end;
}

[flex*="|"][flex*="↙"] {
  align-items: flex-start;
  justify-content: flex-end;
}

[flex*="|"][flex*="←"] {
  align-items: flex-start;
  justify-content: center;
}

[flex*="|"][flex*="↖"] {
  align-items: flex-start;
  justify-content: flex-start;
}

[flex*="|"][flex*="·"] {
  align-items: center;
  justify-content: center;
}

[flex*="|"][flex*="↖"][flex*="↗"] {
  align-items: stretch;
  justify-content: flex-start;
}

[flex*="|"][flex*="←"][flex*="→"], [flex*="|"][flex*="↔"] {
  align-items: stretch;
  justify-content: center;
}

[flex*="|"][flex*="↙"][flex*="↘"] {
  align-items: stretch;
  justify-content: flex-end;
}

[flex*="|"][flex*="↖"][flex*="↙"] {
  align-items: flex-start;
  justify-content: space-between;
}

[flex*="|"][flex*="↑"][flex*="↓"], [flex*="|"][flex*="↕"] {
  align-items: center;
  justify-content: space-between;
}

[flex*="|"][flex*="↗"][flex*="↘"] {
  align-items: flex-end;
  justify-content: space-between;
}

[flex*="|"][flex*="+"] {
  align-items: stretch;
  justify-content: space-between;
}

/*
  3. tools:

  ~ (wrap)
  ! (grow)
  = (noshrink)
*/

[flex*="~"], [flex~="wrap"] {
  flex-wrap: wrap;
}

[flex*="!"], [flex~="grow"] {
  flex-grow: 1;
}

[flex*="="], [flex~="noshrink"] {
  flex-shrink: 0;
}