我正在尝试制作跨浏览器的Flexbox布局,以显示彼此并排放置的卡片。当有足够的空间用于所有卡时,它们应该左对齐或右对齐(由“左”和“右”类确定),但是当没有时,它们会缩小。缩小时,将鼠标悬停在卡片上可以缩小它,从而可以查看更多的卡片。
如果你愿意的话,可以谈论这个,live demo here。
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;
}
到目前为止,我已经成功地在最新版本的IE,FF,Chorme和Opera中创建了所需的布局 但是,我遇到了Safari的问题。它们的布局取决于能够为增长和缩小指定不同的灵活性,但据我所知,Safari不支持这一点。
任何有关在Safari中增长和缩小Flexbox的帮助都表示赞赏。我不想回退到我原来的基于表格的布局,因为它往往在IE和FF中断。
答案 0 :(得分:7)
由于我唯一可以访问的Safari是适用于Windows的版本5,因此我无法确认其是如何工作的。
对于缺乏对flex-shrink和flex-grow作为独立值的支持,你无能为力。我的建议是不要为此目的使用flex-shrink,而是使用填充代替。在这个特定的实例中你会得到几乎相同的效果,它在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%;
}
当然,您需要将转换更改为填充,否则它看起来会有效。