Adds flexbox ui item

src/definitions/views/item.less

@@ -27,8 +27,6 @@
 ---------------*/
 
 .ui.items > .item {
-  table-layout: fixed;
-
   display: @display;
   margin: @itemSpacing 0em;
   width: @width;
@@ -65,9 +63,6 @@
       Item
 ---------------*/
 
-.ui.items > .item {
-  min-width: 100%;
-}
 .ui.items > .item:after {
   display: block;
   content: ' ';
@@ -91,12 +86,13 @@
 
 .ui.items > .item > .image {
   position: relative;
+  flex: 0 0 auto;
   display: @imageDisplay;
   float: @imageFloat;
   margin: @imageMargin;
   padding: @imagePadding;
   max-height: @imageMaxHeight;
-  vertical-align: @imageVerticalAlign;
+  align-self: @imageVerticalAlign;
 }
 .ui.items > .item > .image > img {
   display: block;
@@ -117,6 +113,7 @@
 
 .ui.items > .item > .content {
   display: block;
+  flex: 1 1 auto;
   background: @contentBackground;
   margin: @contentMargin;
   padding: @contentPadding;
@@ -138,7 +135,7 @@
   width: @contentWidth;
   display: @contentDisplay;
   margin-left: @contentOffset;
-  vertical-align: @contentVerticalAlign;
+  align-self: @contentVerticalAlign;
   padding-left: @contentImageDistance;
 }
 
@@ -171,7 +168,7 @@
 ---------------*/
 
 .ui.items > .item .content img {
-  vertical-align: @contentImageVerticalAlign;
+  align-self: @contentImageVerticalAlign;
   width: @contentImageWidth;
 }
 .ui.items > .item img.avatar,
@@ -356,6 +353,7 @@
 /* Mobily Only */
 @media only screen and (max-width: @largestMobileScreen) {
   .ui.items > .item {
+    flex-direction: column;
     margin: @mobileItemSpacing 0em;
   }
   .ui.items > .item > .image {
@@ -387,13 +385,13 @@
 --------------------*/
 
 .ui.items > .item > .image + [class*="top aligned"].content {
-  vertical-align: top;
+  align-self: top;
 }
 .ui.items > .item > .image + [class*="middle aligned"].content {
-  vertical-align: middle;
+  align-self: center;
 }
 .ui.items > .item > .image + [class*="bottom aligned"].content {
-  vertical-align: bottom;
+  align-self: bottom;
 }
 
 

src/themes/default/views/item.variables

@@ -10,7 +10,7 @@
 @groupMargin: 1.5em 0em;
 
 /* Item */
-@display: table;
+@display: flex;
 @background: transparent;
 @borderRadius: 0rem;
 @minHeight: 0px;
@@ -40,7 +40,7 @@
 --------------------*/
 
 /* Image */
-@imageDisplay: table-cell;
+@imageDisplay: block;
 @imageFloat: none;
 @imageMaxHeight: '';
 @imageVerticalAlign: top;
@@ -52,10 +52,10 @@
 @imageBorder: none;
 
 /* Content */
-@contentDisplay: table-cell;
+@contentDisplay: block;
 @contentVerticalAlign: top;
 
-@contentWidth: 100%;
+@contentWidth: auto;
 @contentOffset: 0em;
 @contentBackground: none;
 @contentMargin: 0em;