Added a utility file with flexbox

2016-10-10 09:59:33 +02:00
parent 39c1df41a7
commit 3299aee2bd
1 changed files with 67 additions and 0 deletions
@@ -0,0 +1,67 @@
+/*
+
+    Flexbox
+
+*/
+
+.flex { display: flex; }
+.flex-inline { display: inline-flex; }
+
+.flex-column  { flex-direction: column; }
+.flex-wrap    { flex-wrap: wrap; }
+
+.items-start    { align-items: flex-start; }
+.items-end      { align-items: flex-end; }
+.items-center   { align-items: center; }
+.items-baseline { align-items: baseline; }
+.items-stretch  { align-items: stretch; }
+
+.self-start    { align-self: flex-start; }
+.self-end      { align-self: flex-end; }
+.self-center   { align-self: center; }
+.self-baseline { align-self: baseline; }
+.self-stretch  { align-self: stretch; }
+
+.justify-start   { justify-content: flex-start; }
+.justify-end     { justify-content: flex-end; }
+.justify-center  { justify-content: center; }
+.justify-between { justify-content: space-between; }
+.justify-around  { justify-content: space-around; }
+
+.content-start   { align-content: flex-start; }
+.content-end     { align-content: flex-end; }
+.content-center  { align-content: center; }
+.content-between { align-content: space-between; }
+.content-around  { align-content: space-around; }
+.content-stretch { align-content: stretch; }
+
+.flx-i {
+  flex: 1;
+}
+.flx-g0 {
+  flex-grow: 0;
+}
+.flx-s0 {
+  flex-shrink: 0;
+}
+.flx-b0 {
+  flex-basis: 0%;
+}
+.flx-g1 {
+  flex-grow: 1;
+}
+.flx-s1 {
+  flex-shrink: 1;
+}
+.flx-b1 {
+  flex-basis: 100%;
+}
+
+/* 1. Fix for Chrome 44 bug. https://code.google.com/p/chromium/issues/detail?id=506893 */
+.flex-auto {
+  flex: 1 1 auto;
+  min-width: 0; /* 1 */
+  min-height: 0; /* 1 */
+}
+
+.flex-none { flex: none; }