Flexbox in Safari: Grow and shrink
Since the only Safari I have access to is version 5 for Windows, I can't confirm how this works in anything newer than that.
There's nothing you can do about the lack of support for flex-shrink and flex-grow as independent values. My advice would be to not use flex-shrink for this purpose but to use padding instead. You get almost the same effect in this particular instance, and it works in Safari 5:
http://codepen.io/cimmanon/pen/oHzgr
img {
width: 90px;
position: absolute;
}
.cards {
display: -webkit-box;
display: -moz-box;
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: start;
-moz-box-pack: start;
-webkit-flex-pack: start;
-ms-flex-pack: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
}
.cards.right {
float: right;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-box-direction: reverse;
-moz-box-direction: reverse;
-webkit-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
-webkit-box-pack: end;
-moz-box-pack: end;
-webkit-flex-pack: end;
-ms-flex-pack: end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
}
.cards div {
position: relative;
max-width: 90px;
-webkit-box-flex: 2;
-moz-box-flex: 2;
-webkit-flex: 0 2 90px;
-ms-flex: 0 2 90px;
flex: 0 2 90px;
-webkit-transition: -webkit-flex .3s;
transition: flex-shrink .3s;
transition: flex-shrink .3s, -webkit-flex .3s;
}
.cards.left div:last-child, .cards.right div:first-child {
-webkit-box-flex: 0;
-moz-box-flex: 0;
-webkit-flex: 0 0 90px;
-ms-flex: 0 0 90px;
flex: 0 0 90px;
}
.cards.left div:not(:last-child):hover, .cards.right div:hover + div {
padding-right: 5%;
}
You'll need to change the transition to padding, of course, but otherwise it looks like it works.
TwiNight
Computer programming enthusiast from Hong Kong. Computer Science Graduate. Specializes in HTML, Javascript, CSS, and PHP.
Updated on December 16, 2020Comments
-
TwiNight over 3 years
I am trying to make a cross-browser flexbox layout, to display cards positioned alongside one another. They should be left- or right-aligned (determined by "left" and "right" classes) when there is enough space for all cards, but shrink when there isn't. When shrinking, mouseover a card would make it shrink less, so that more of it can be viewed.
So much talk about this, live demo here if you prefer.
CSS:
img{ width:90px; position: absolute; } .cards{ display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: row; -webkit-justify-content: flex-start; -ms-flex-direction: row; -ms-justify-content: flex-start; flex-direction: row; justify-content: flex-start; } .cards.right{ float: right; -webkit-flex-direction: row-reverse; -webkit-justify-content: flex-end; -ms-flex-direction: row-reverse; -ms-justify-content: flex-end; flex-direction: row-reverse; justify-content: flex-end; } .cards div{ position:relative; -webkit-flex: 0 2 90px; -ms-flex: 0 2 90px; flex: 0 2 90px; -webkit-box-flex: 0 2 90px; transition: flex-shrink .3s; transition: flex-shrink .3s, -webkit-flex .3s; -webkit-transition: -webkit-flex .3s; } .cards.left div:last-child, .cards.right div:first-child{ -webkit-flex: 0 0 90px; -ms-flex: 0 0 90px; flex: 0 0 90px; -webkit-box-flex: 0 0 90px; } .cards.left div:not(:last-child):hover, .cards.right div:hover+div{ -webkit-flex: 0 1 90px; -ms-flex: 0 1 90px; flex: 0 1 90px; -webkit-box-flex: 0 1 90px; }
So far I have successfully created the desired layout in lastest versions of IE, FF, Chorme and Opera.
However, I am running into problems with Safari. They layout depends on being able to specify different flexibilities for grow and shrink, but as far as I can tell, Safari does not support this.Any help on growing and shrinking flexboxes in Safari is appreciated. I don't want to fallback to my old table-based layout as it tends to break in IE and FF.