Safari 中的 Flexbox:增长和缩小
Posted
技术标签:
【中文标题】Safari 中的 Flexbox:增长和缩小【英文标题】:Flexbox in Safari: Grow and shrink 【发布时间】:2013-04-14 08:50:43 【问题描述】:我正在尝试制作一种跨浏览器的 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 中中断。
【问题讨论】:
【参考方案1】:由于我唯一可以访问的 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%;
当然,您需要将过渡更改为填充,否则它看起来可以正常工作。
【讨论】:
如果我可以专门针对 Safari 那就太好了,但无论如何它都适用于所有浏览器。 干杯人!我把这个(.cards)放到.flex中,然后我可以在我的sass(scss)中@extend .flex!像魅力一样工作:)以上是关于Safari 中的 Flexbox:增长和缩小的主要内容,如果未能解决你的问题,请参考以下文章
带有图像的 flexbox 在 Safari 中无法正确查看
Flexbox 在 Safari 9.1.1 上不起作用 [重复]