侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 130562 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

css3 – Safari中的Flexbox:增长和缩小

2022-12-24 星期六 / 0 评论 / 0 点赞 / 27 阅读 / 3922 字

我正在尝试制作跨浏览器的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%;}

当然,您需要将转换更改为填充,否则它看起来像是有效的.

. . .. ...

广告 广告

评论区