added direction, justifyContent, and alignItems props on EuiFlexItem

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added direction, justifyContent, and alignItems props on `EuiFlexItem` ([#3069](https://github.com/elastic/eui/pull/3069))
 - Updated `EuiFilterSelect` to retain the order of its filters ([#3063](https://github.com/elastic/eui/pull/3063))
 - Added `href` prop to `EuiBadge` ([#3009](https://github.com/elastic/eui/pull/3009))
 - Added props descriptions for `EuiComboBox` ([#3007](https://github.com/elastic/eui/pull/3007))

src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap

@@ -111,14 +111,14 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                   grow={false}
                 >
                   <div
-                    className="euiFlexItem euiFlexItem--flexGrowZero"
+                    className="euiFlexItem euiFlexItem--alignItemsCenter euiFlexItem--justifyContentCenter euiFlexItem--directionRow euiFlexItem--flexGrowZero"
                   />
                 </EuiFlexItem>
                 <EuiFlexItem
                   grow={false}
                 >
                   <div
-                    className="euiFlexItem euiFlexItem--flexGrowZero"
+                    className="euiFlexItem euiFlexItem--alignItemsCenter euiFlexItem--justifyContentCenter euiFlexItem--directionRow euiFlexItem--flexGrowZero"
                   />
                 </EuiFlexItem>
               </div>
@@ -322,7 +322,7 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                   grow={false}
                 >
                   <div
-                    className="euiFlexItem euiFlexItem--flexGrowZero"
+                    className="euiFlexItem euiFlexItem--alignItemsCenter euiFlexItem--justifyContentCenter euiFlexItem--directionRow euiFlexItem--flexGrowZero"
                   >
                     <EuiPopover
                       anchorPosition="upRight"
@@ -421,7 +421,7 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                   grow={false}
                 >
                   <div
-                    className="euiFlexItem euiFlexItem--flexGrowZero"
+                    className="euiFlexItem euiFlexItem--alignItemsCenter euiFlexItem--justifyContentCenter euiFlexItem--directionRow euiFlexItem--flexGrowZero"
                   >
                     <EuiPagination
                       activePage={1}

src/components/color_picker/__snapshots__/color_picker.test.tsx.snap

@@ -664,7 +664,7 @@ exports[`renders inline EuiColorPicker 1`] = `
     role="listbox"
   >
     <div
-      class="euiFlexItem euiFlexItem--flexGrowZero"
+      class="euiFlexItem euiFlexItem--alignItemsCenter euiFlexItem--justifyContentCenter euiFlexItem--directionRow euiFlexItem--flexGrowZero"
     >
       <button
         aria-label="Select #54B399 as the color"
@@ -675,7 +675,7 @@ exports[`renders inline EuiColorPicker 1`] = `
       />
     </div>
     <div
-      class="euiFlexItem euiFlexItem--flexGrowZero"
+      class="euiFlexItem euiFlexItem--alignItemsCenter euiFlexItem--justifyContentCenter euiFlexItem--directionRow euiFlexItem--flexGrowZero"
     >
       <button
         aria-label="Select #6092C0 as the color"
@@ -686,7 +686,7 @@ exports[`renders inline EuiColorPicker 1`] = `
       />
     </div>
     <div
-      class="euiFlexItem euiFlexItem--flexGrowZero"
+      class="euiFlexItem euiFlexItem--alignItemsCenter euiFlexItem--justifyContentCenter euiFlexItem--directionRow euiFlexItem--flexGrowZero"
     >
       <button
         aria-label="Select #D36086 as the color"
@@ -697,7 +697,7 @@ exports[`renders inline EuiColorPicker 1`] = `
       />
     </div>
     <div
-      class="euiFlexItem euiFlexItem--flexGrowZero"
+      class="euiFlexItem euiFlexItem--alignItemsCenter euiFlexItem--justifyContentCenter euiFlexItem--directionRow euiFlexItem--flexGrowZero"
     >
       <button
         aria-label="Select #9170B8 as the color"
@@ -708,7 +708,7 @@ exports[`renders inline EuiColorPicker 1`] = `
       />
     </div>
     <div
-      class="euiFlexItem euiFlexItem--flexGrowZero"
+      class="euiFlexItem euiFlexItem--alignItemsCenter euiFlexItem--justifyContentCenter euiFlexItem--directionRow euiFlexItem--flexGrowZero"
     >
       <button
         aria-label="Select #CA8EAE as the color"
@@ -719,7 +719,7 @@ exports[`renders inline EuiColorPicker 1`] = `
       />
     </div>
     <div
-      class="euiFlexItem euiFlexItem--flexGrowZero"
+      class="euiFlexItem euiFlexItem--alignItemsCenter euiFlexItem--justifyContentCenter euiFlexItem--directionRow euiFlexItem--flexGrowZero"
     >
       <button
         aria-label="Select #D6BF57 as the color"
@@ -730,7 +730,7 @@ exports[`renders inline EuiColorPicker 1`] = `
       />
     </div>
     <div
-      class="euiFlexItem euiFlexItem--flexGrowZero"
+      class="euiFlexItem euiFlexItem--alignItemsCenter euiFlexItem--justifyContentCenter euiFlexItem--directionRow euiFlexItem--flexGrowZero"
     >
       <button
         aria-label="Select #B9A888 as the color"
@@ -741,7 +741,7 @@ exports[`renders inline EuiColorPicker 1`] = `
       />
     </div>
     <div
-      class="euiFlexItem euiFlexItem--flexGrowZero"
+      class="euiFlexItem euiFlexItem--alignItemsCenter euiFlexItem--justifyContentCenter euiFlexItem--directionRow euiFlexItem--flexGrowZero"
     >
       <button
         aria-label="Select #DA8B45 as the color"
@@ -752,7 +752,7 @@ exports[`renders inline EuiColorPicker 1`] = `
       />
     </div>
     <div
-      class="euiFlexItem euiFlexItem--flexGrowZero"
+      class="euiFlexItem euiFlexItem--alignItemsCenter euiFlexItem--justifyContentCenter euiFlexItem--directionRow euiFlexItem--flexGrowZero"
     >
       <button
         aria-label="Select #AA6556 as the color"
@@ -763,7 +763,7 @@ exports[`renders inline EuiColorPicker 1`] = `
       />
     </div>
     <div
-      class="euiFlexItem euiFlexItem--flexGrowZero"
+      class="euiFlexItem euiFlexItem--alignItemsCenter euiFlexItem--justifyContentCenter euiFlexItem--directionRow euiFlexItem--flexGrowZero"
     >
       <button
         aria-label="Select #E7664C as the color"

src/components/datagrid/__snapshots__/data_grid.test.tsx.snap

@@ -45,7 +45,7 @@ exports[`EuiDataGrid pagination renders 1`] = `
   class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
 >
   <div
-    class="euiFlexItem euiFlexItem--flexGrowZero"
+    class="euiFlexItem euiFlexItem--alignItemsCenter euiFlexItem--justifyContentCenter euiFlexItem--directionRow euiFlexItem--flexGrowZero"
   >
     <div
       class="euiPopover euiPopover--anchorUpRight euiPopover--withTitle"
@@ -77,7 +77,7 @@ exports[`EuiDataGrid pagination renders 1`] = `
     </div>
   </div>
   <div
-    class="euiFlexItem euiFlexItem--flexGrowZero"
+    class="euiFlexItem euiFlexItem--alignItemsCenter euiFlexItem--justifyContentCenter euiFlexItem--directionRow euiFlexItem--flexGrowZero"
   >
     <div
       class="euiPagination"

src/components/empty_prompt/__snapshots__/empty_prompt.test.tsx.snap

@@ -66,12 +66,12 @@ exports[`EuiEmptyPrompt props actions renders an array 1`] = `
     class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive"
   >
     <div
-      class="euiFlexItem euiFlexItem--flexGrowZero"
+      class="euiFlexItem euiFlexItem--alignItemsCenter euiFlexItem--justifyContentCenter euiFlexItem--directionRow euiFlexItem--flexGrowZero"
     >
       action1
     </div>
     <div
-      class="euiFlexItem euiFlexItem--flexGrowZero"
+      class="euiFlexItem euiFlexItem--alignItemsCenter euiFlexItem--justifyContentCenter euiFlexItem--directionRow euiFlexItem--flexGrowZero"
     >
       action2
     </div>

src/components/filter_group/__snapshots__/filter_select_item.test.tsx.snap

@@ -12,14 +12,14 @@ exports[`EuiFilterSelectItem is rendered 1`] = `
     class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
   >
     <div
-      class="euiFlexItem euiFlexItem--flexGrowZero"
+      class="euiFlexItem euiFlexItem--alignItemsCenter euiFlexItem--justifyContentCenter euiFlexItem--directionRow euiFlexItem--flexGrowZero"
     >
       <div
         data-euiicon-type="empty"
       />
     </div>
     <div
-      class="euiFlexItem euiFilterSelectItem__content"
+      class="euiFlexItem euiFlexItem--alignItemsCenter euiFlexItem--justifyContentCenter euiFlexItem--directionRow euiFilterSelectItem__content"
     />
   </span>
 </button>

src/components/flex/__snapshots__/flex_item.test.tsx.snap

@@ -2,80 +2,80 @@
 
 exports[`EuiFlexItem grow 1 is rendered 1`] = `
 <div
-  class="euiFlexItem euiFlexItem--flexGrow1"
+  class="euiFlexItem euiFlexItem--alignItemsCenter euiFlexItem--justifyContentCenter euiFlexItem--directionRow euiFlexItem--flexGrow1"
 />
 `;
 
 exports[`EuiFlexItem grow 2 is rendered 1`] = `
 <div
-  class="euiFlexItem euiFlexItem--flexGrow2"
+  class="euiFlexItem euiFlexItem--alignItemsCenter euiFlexItem--justifyContentCenter euiFlexItem--directionRow euiFlexItem--flexGrow2"
 />
 `;
 
 exports[`EuiFlexItem grow 3 is rendered 1`] = `
 <div
-  class="euiFlexItem euiFlexItem--flexGrow3"
+  class="euiFlexItem euiFlexItem--alignItemsCenter euiFlexItem--justifyContentCenter euiFlexItem--directionRow euiFlexItem--flexGrow3"
 />
 `;
 
 exports[`EuiFlexItem grow 4 is rendered 1`] = `
 <div
-  class="euiFlexItem euiFlexItem--flexGrow4"
+  class="euiFlexItem euiFlexItem--alignItemsCenter euiFlexItem--justifyContentCenter euiFlexItem--directionRow euiFlexItem--flexGrow4"
 />
 `;
 
 exports[`EuiFlexItem grow 5 is rendered 1`] = `
 <div
-  class="euiFlexItem euiFlexItem--flexGrow5"
+  class="euiFlexItem euiFlexItem--alignItemsCenter euiFlexItem--justifyContentCenter euiFlexItem--directionRow euiFlexItem--flexGrow5"
 />
 `;
 
 exports[`EuiFlexItem grow 6 is rendered 1`] = `
 <div
-  class="euiFlexItem euiFlexItem--flexGrow6"
+  class="euiFlexItem euiFlexItem--alignItemsCenter euiFlexItem--justifyContentCenter euiFlexItem--directionRow euiFlexItem--flexGrow6"
 />
 `;
 
 exports[`EuiFlexItem grow 7 is rendered 1`] = `
 <div
-  class="euiFlexItem euiFlexItem--flexGrow7"
+  class="euiFlexItem euiFlexItem--alignItemsCenter euiFlexItem--justifyContentCenter euiFlexItem--directionRow euiFlexItem--flexGrow7"
 />
 `;
 
 exports[`EuiFlexItem grow 8 is rendered 1`] = `
 <div
-  class="euiFlexItem euiFlexItem--flexGrow8"
+  class="euiFlexItem euiFlexItem--alignItemsCenter euiFlexItem--justifyContentCenter euiFlexItem--directionRow euiFlexItem--flexGrow8"
 />
 `;
 
 exports[`EuiFlexItem grow 9 is rendered 1`] = `
 <div
-  class="euiFlexItem euiFlexItem--flexGrow9"
+  class="euiFlexItem euiFlexItem--alignItemsCenter euiFlexItem--justifyContentCenter euiFlexItem--directionRow euiFlexItem--flexGrow9"
 />
 `;
 
 exports[`EuiFlexItem grow 10 is rendered 1`] = `
 <div
-  class="euiFlexItem euiFlexItem--flexGrow10"
+  class="euiFlexItem euiFlexItem--alignItemsCenter euiFlexItem--justifyContentCenter euiFlexItem--directionRow euiFlexItem--flexGrow10"
 />
 `;
 
 exports[`EuiFlexItem grow false is rendered 1`] = `
 <div
-  class="euiFlexItem euiFlexItem--flexGrowZero"
+  class="euiFlexItem euiFlexItem--alignItemsCenter euiFlexItem--justifyContentCenter euiFlexItem--directionRow euiFlexItem--flexGrowZero"
 />
 `;
 
 exports[`EuiFlexItem grow true is rendered 1`] = `
 <div
-  class="euiFlexItem"
+  class="euiFlexItem euiFlexItem--alignItemsCenter euiFlexItem--justifyContentCenter euiFlexItem--directionRow"
 />
 `;
 
 exports[`EuiFlexItem is rendered 1`] = `
 <div
   aria-label="aria-label"
-  class="euiFlexItem testClass1 testClass2"
+  class="euiFlexItem euiFlexItem--alignItemsCenter euiFlexItem--justifyContentCenter euiFlexItem--directionRow testClass1 testClass2"
   data-test-subj="test subject string"
 />
 `;

src/components/flex/_flex_item.scss

@@ -9,7 +9,6 @@
   }
 
   display: flex; /* 1 */
-  flex-direction: column; /* 1 */
 
   /*
    * 1. We need the extra specificity here to override the FlexGroup > FlexItem styles.
@@ -27,6 +26,61 @@
   }
 }
 
+// Justify the item
+.euiFlexItem--justifyContentSpaceEvenly {
+  justify-content: space-evenly;
+}
+
+.euiFlexItem--justifyContentSpaceBetween {
+  justify-content: space-between;
+}
+
+.euiFlexItem--justifyContentSpaceAround {
+  justify-content: space-around;
+}
+
+.euiFlexItem--justifyContentCenter {
+  justify-content: center;
+}
+
+.euiFlexItem--justifyContentFlexEnd {
+  justify-content: flex-end;
+}
+
+// Align Items
+.euiFlexItem--alignItemsFlexStart {
+  align-items: flex-start;
+}
+
+.euiFlexItem--alignItemsCenter {
+  align-items: center;
+}
+
+.euiFlexItem--alignItemsFlexEnd {
+  align-items: flex-end;
+}
+
+.euiFlexItem--alignItemsBaseline {
+  align-items: baseline;
+}
+
+// Direction
+.euiFlexItem--directionRow {
+  flex-direction: row;
+}
+
+.euiFlexItem--directionRowReverse {
+  flex-direction: row-reverse;
+}
+
+.euiFlexItem--directionColumn {
+  flex-direction: column;
+}
+
+.euiFlexItem--directionColumnReverse {
+  flex-direction: column-reverse;
+}
+
 // On mobile we force them to stack and act the same.
 @include euiBreakpoint('xs', 's') {
   .euiFlexGroup--responsive > .euiFlexItem,