我正在构建一个网页并针对不同的浏览器运行测试,其中一个设计涉及一个flexbox和空间均匀,我知道这还没有被广泛支持,所以作为一个后备我使用像这样的空格:

.some_element {
display:flex;
justify-content:space-between;
justify-content:space-evenly;
}

上面的代码正常工作:Firefox,Chrome,IE11,Edge但在Safari上失败.

Safari确实理解并识别该space-evenly属性但对其没有任何作用,换句话说结果是相同的:justify-content:initial;

正式的Safari不支持-webkit-justify-content所以我认为我会切肉刀并尝试后备这样:

.some_element {
    display:flex;
    justify-content:space-between;
    -webkit-justify-content:space-evenly;
    -moz-justify-content:space-evenly;
    }

但是,Safari确实理解它并且它使它变得相同initial.在iOS上也是如此......这让我的网站设计崩溃了......

在美学上,空间均匀看起来更好,所以我真的想在支持它的浏览器上利用它,所以我不想因为苹果而热衷于放弃它......另一方面苹果用户是一个重要的部分访问者所以我不能忽视这个问题,并让页面渲染与initial外观.

谢谢.

@supports没有任何帮助,请参阅上面的评论(嘿,Apple,你能提醒我这个功能有什么意义吗？叹气)但是你可以使用:pseudos和space-between.
唯一的限制是你不能在flex容器上使用pseudos来做任何其他事情.

➡️ Codepen

➡️相关代码:

.evenly-like {
  display: flex;
  justify-content: space-between;

  &:before,
  &:after {
    content: '';
    display: block;
  }
}

有5个项目,有6个"空格"同样宽,space-evenly4个space-between(和半+ 4 +半space-around).
通过在Flex容器上创建2:pseudos并给出它们被Flexbox的功能视为弹性项目,space-between现在有5 + 2 = 7个项目因此6个同样宽的"空间",问题解决了.

➡️完整片段:

/* /!\ Pasted from compiled Scss in Codepen with Autoprefixer. Your browserslist is probably not as complete as that one :) */

.parent {
  display: -webkit-box;
  display: -ms-flexbox;
  display:     flex;
  border: 1px solid darkred;
  margin-bottom: 30px;
}
.parent.evenly {
  -webkit-box-pack: space-evenly;
     -ms-flex-pack: space-evenly;
   justify-content: space-evenly;
}
.parent.around {
  -ms-flex-pack: distribute;
      justify-content: space-around;
}
.parent.between {
  -webkit-box-pack: justify;
     -ms-flex-pack: justify;
   justify-content: space-between;
}
.parent.evenly-like {
  -webkit-box-pack: justify;
     -ms-flex-pack: justify;
   justify-content: space-between;
}
.parent.evenly-like:before,
.parent.evenly-like:after {
  content: '';
  display: block;
  width: 2px;
  background-color: red;
}

.item {
  padding: 10px;
  color: white;
  background-color: slateblue;
  outline: 1px dotted darkblue;
}

space-evenly

  
1 lorem
  
2 lorem
  
3 lorem
  
4 lorem
  
5 lorem


Mimicking space-evenly with space-between: and :pseudos

  
1 lorem
  
2 lorem
  
3 lorem
  
4 lorem
  
5 lorem




space-around

  
1 lorem
  
2 lorem
  
3 lorem
  
4 lorem
  
5 lorem


space-between

  
1 lorem
  
2 lorem
  
3 lorem
  
4 lorem
  
5 lorem