浅谈解决space-evenly兼容性问题的两种方法_CSS教程_CSS_网页制作

来源:脚本之家  责任编辑:小易  

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 的支持范围确实相对较小。

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;
  }
}

到此这篇关于浅谈解决space-evenly兼容性问题的两种方法的文章就介绍到这了,更多相关space-evenly兼容性内容请搜索真格学网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持真格学网! 


  • 本文相关:
  • 解决flex布局space-between最后一行左对齐的方法
  • css3 flex布局 justify-content:space-between 最后一行左对齐
  • 解决display:flex属性 justify-content: space-between换行后的排版问
  • 详解解决flex布局的justify-content: space-between对齐方式的一个bug
  • 使用white-space来阻止文字显示自动换行
  • 让示例代码在手机上换行显示以避免恼人的滚动条
  • css文本换行属性word-wrap和white-space使用总结
  • 网页制作中表格属性cellpad、cellspace和border描述及使用介绍
  • css中强制换行word-break、word-wrap、white-space区别实例说明
  • ie6,ie7下实现white-space:pre-wrap
  • 制作网页时,在CSS样式中输入同样数字的值,为什么...
  • CSS网页设计页面浏览器兼容性问题怎么解决
  • CSS网页设计页面浏览器兼容性问题怎么解决?
  • 如何快速的解决CSS+DIV布局中,所有浏览器兼容性问...
  • 网页css样式不兼容问题
  • 经常遇到的css的兼容性有哪些?原因,解决方法是什么
  • 常见的css浏览器兼容性问题有哪些,如何解决
  • 浅谈一下怎么处理浏览器兼容性问题
  • 用css定义网页出来的效果有不兼容的状况,我使用cs...
  • 请帮忙解决CSS样式中浏览器兼容性问题?
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作csscss教程兼容性css3 flex布局 justify-content:space-between 最后一行左对齐详解解决flex布局的justify-content: space-between对齐方式的一个bug使用white-space来阻止文字显示自动换行让示例代码在手机上换行显示以避免恼人的滚动条css文本换行属性word-wrap和white-space使用总结网页制作中表格属性cellpad、cellspace和border描述及使用介绍css中强制换行word-break、word-wrap、white-space区别实例说明ie6,ie7下实现white-space:pre-wrapcss教程css3div+css教程web标准教程浏览器兼容教程css布局实例css控制ul li 的样式详解(推荐)html设置超链接字体颜色和点击后的字体颜色div水平垂直居中的完美解决方案css设置各种中文字体如雅黑、黑体、宋体、楷体等等css 文本字体颜色设置方法(css color)css 漂亮搜索框美化代码css自定义select下拉选择框的样式(不用其他标签模拟)css圆角效果 -webkit-border-radius(css3中border-radcss 中的background:transparent到底是什么意思有什么css 首行缩进两个文字在vue-cli中使用css-loader实现css module浅谈解决space-evenly兼容性问题的两种方法纯css实现div悬浮的示例代码(固定位置)详解如何解决position:fixed固定定位偏移问题使用纯 css 实现滚动阴影效果探索css属性*-gradient的实用价值css仿苹果平滑开关按钮效果css实现弹窗上下左右居中且背景透明锁定窗口效果css 利用 position + margin 实现固定盒子横向纵向居css 鼠标悬浮在图片上添加遮罩层效果的实现
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved