From 05fc0f84ed02339298913300b85b91c274743444 Mon Sep 17 00:00:00 2001 From: jlukic Date: Fri, 6 Mar 2015 20:25:37 -0500 Subject: [PATCH] Fix alignment inside flex containers for text and valign --- src/definitions/collections/grid.less | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/definitions/collections/grid.less b/src/definitions/collections/grid.less index 201385221..971cfd9f5 100755 --- a/src/definitions/collections/grid.less +++ b/src/definitions/collections/grid.less @@ -1182,6 +1182,7 @@ .ui.grid [class*="left aligned"].column, .ui.grid > [class*="left aligned"].row > .column { text-align: left; + align-items: flex-start; } .ui.grid [class*="left aligned"].column{ text-align: left !important; @@ -1193,6 +1194,7 @@ .ui[class*="center aligned"].grid > .column, .ui.grid > [class*="center aligned"].row > .column { text-align: center; + align-items: center; } .ui.grid [class*="center aligned"].column{ text-align: center !important; @@ -1204,6 +1206,7 @@ .ui[class*="right aligned"].grid > .column, .ui.grid > [class*="right aligned"].row > .column { text-align: right; + align-items: flex-end; } .ui.grid [class*="right aligned"].column{ text-align: right !important; @@ -1234,11 +1237,11 @@ .ui.grid [class*="top aligned"].column, .ui.grid > [class*="top aligned"].row > .column { vertical-align: top; - align-self: flex-start; + justify-content: flex-start; } .ui.grid [class*="top aligned"].column { vertical-align: top !important; - align-self: flex-start; + justify-content: flex-start; } /* Middle Aligned */ @@ -1247,11 +1250,11 @@ .ui[class*="middle aligned"].grid > .column, .ui.grid > [class*="middle aligned"].row > .column { vertical-align: middle; - align-self: center; + justify-content: center; } .ui.grid [class*="middle aligned"].column{ vertical-align: middle !important; - align-self: center; + justify-content: center; } /* Bottom Aligned */ @@ -1260,10 +1263,10 @@ .ui[class*="bottom aligned"].grid > .column, .ui.grid > [class*="bottom aligned"].row > .column { vertical-align: bottom; - align-self: flex-end; + justify-content: flex-end; } .ui.grid [class*="bottom aligned"].column { - align-self: flex-end; + justify-content: flex-end; vertical-align: bottom !important; } @@ -1420,14 +1423,12 @@ .ui.grid > [class*="equal width"].row { display: flex; flex-direction: row; - align-items: stretch; } .ui[class*="equal width"].grid > .column, .ui[class*="equal width"].grid > .row > .column, .ui.grid > [class*="equal width"].row > .column { display: flex; flex-direction: column; - flex: 1 0 auto; } @@ -1457,20 +1458,18 @@ .ui.grid > [class*="equal height"].row { display: flex; flex-direction: row; - align-items: stretch; } .ui[class*="equal height"].grid > .column, .ui[class*="equal height"].grid > .row > .column, .ui.grid > [class*="equal height"].row > .column { display: flex; flex-direction: column; - flex: 1 0 auto; - align-items: stretch; + flex: 0 0 auto; } .ui[class*="equal height"].grid > .column > *, .ui[class*="equal height"].grid > .row > .column > *, .ui.grid > [class*="equal height"].row > .column > * { - flex: 1 0 auto; + flex: 0 0 auto; } @@ -1690,6 +1689,7 @@ padding: (@stackableRowSpacing / 2) (@stackableGutter / 2) !important; } .ui.stackable.grid > .row { + display: block !important; margin: 0em; padding: 0em; }