我正在尝试制作跨浏览器的flexbox布局,以显示彼此并排放置的卡片.当有足够的空间用于所有卡时,它们应该左对齐或右对齐(由“左”和“右”类确定),但是当没有时,它们会缩小.缩小时,将鼠标悬停在卡片上
... . . 我正在尝试制作跨浏览器的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中断.
.解决方法
. 由于我唯一可以访问的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%;}
当然,您需要将转换更改为填充,否则它看起来像是有效的.
. . .. ...