DDR爱好者之家

浅谈解决space-evenly兼容性问题的两种方法
站长资源 2024/11/24 佚名
38 1538
DDR爱好者之家 Design By 杰米

flex 从 2009 年推出到现在，已经得到了几乎所有浏览器的支持。作为一种简便的、响应式的布局方案，flex 给我们的布局开发带来了很多便利。
justify-content 属性是 flex 布局中很常用的属性，定义了子元素在主轴上的对齐方式。它有 flex-start | flex-end | center | space-between | space-around | space-evenly 等属性。

但是，笔者在一次开发中发现 space-evenly 在使用中会面临兼容性问题，在 iPhone 5s 上测试时发现设定了 justify-content: space-evenly 的容器中的子元素并没有按期望中的一样沿着主轴均匀分布，而是都挤在了左边。

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

查看 Can I use space-evenly? 发现，space-evenly 的支持范围确实相对较小。

浅谈解决space-evenly兼容性问题的两种方法

MDN 上对 space-evenly 属性的定义是：

flex 项都沿着主轴均匀分布在指定的对齐容器中。相邻 flex 项之间的间距，主轴起始位置到第一个 flex 项的间距，主轴结束位置到最后一个 flex 项的间距，都完全一样。

为了解决这个问题，笔者想到了两种方式：

利用 flex-grow

flex-grow 指定了容器的剩余空间应该如何分配给子元素。
让所有子元素同时拥有 flex-grow: 1 属性，它们会等分容器的空间，也就实现了「均匀分布、间距相等」的效果。

.container {
  display: flex;
  .child: {
    flex: 1;
  }
}

利用 space-between

另外一种方式是利用和 space-evenly 属性类似的 space-between。这两个属性很接近，而 space-between 也基本不会遇到兼容性问题。

不同的是，在 space-evenly 下，每个子元素的两侧都有同样的空间，而在 space-between 下，每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。

假设在一个容器中有五个子元素，用那么这两个属性的差别可以简单表示成：

// space-evenly
|--子--子--子--子--子--|

// space-between
|子--子--子--子--子|

也就是说，space-evenly 会比 space-between 多了两边的两个空隙，而 space-between 的第一个和最后一个子元素是紧贴容器边缘的。

为了填补这个差异，我们可以用两个伪元素，来让容器在设定为 space-between 的时候，拥有七个子元素，也就拥有了「六个空隙」：

|伪--子--子--子--子--子--伪|

代码：

.container {
  display: flex;
  justify-content: space-between;

  &:before,
  &:after {
    content: '';
    display: block;
  }
}
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米