登录  /  注册

模拟flexbox justify-content的space-between,space-around_html/css_WEB-ITnose

php中文网
发布: 2016-06-24 11:44:57
原创
1476人浏览过

(本文的初衷是弥补一点响应式设计在底版本浏览器中的不足,因此如果你对响应式不感冒,请无视)

flexbox?

关于flexbox,本?无法专业的说很多,可以参见Flexible boxes更加优雅的Web布局。这是一个很厉害的东西,而其中有一个justify-content属性,用来指定水平方向上布局排版。其中的一个属性space-between,这个可以让子元素被平均分布,第一子元素在容器最左边,最后一个子元素在最右边.另一个属性space-around可以让一列子元素均匀分布。

(注意,父元素设置了display:flex,那只作用于这个父元素下的第一级子元素。也就是说,有div->ul->li,div设置了flex,则li元素是没有效果的)。

比如下图中的倒数第二行是space-between,最后一行是space-around。

 

text-align:justify

justify表示两端对齐文本,

如果在加上inline-block这个外表是inline,内在是block的“两面派”,就可以实现justify-content:space-between了。因为justify针对的是inline元素。

至于space-around的话,在父元素添加水平方向的padding,padding值等于margin值就可以了。比如li margin:0 1%;,则li标签之间都是2%宽度的间距,最左边li的左边间距和最右边的右边间距都是1%宽度,这时在父元素padding:0 1%;就让所有li标签两表的间距都是2%宽度了。

具体的实现,在张鑫旭博客中已经实现了,参见display:inline-block/text-align:justify下列表的两端对齐布局

需要注意几点:

1.text-align:justify存在兼容性问题,解决方案可以参见正美的css 文本两端对齐。

2.子元素会继承text-align:justify,出现文字两端对齐

解决方法可以参见阿里妈妈的cube css解决方案中的两端对齐布局,在子元素中添加class dib.

/* 子元素取消两端对齐 */.dib {    -moz-text-align-last: auto;    -webkit-text-align-last: auto;    text-align-last: auto;    text-justify: auto;    text-align: left;    letter-spacing: normal;    word-spacing: normal;}
登录后复制

3.使最后一行左对齐的justify_fix类标签数量是一行可以容纳的最多inline-block减2,不必是张鑫旭文中说的"每行元素的列表个数".

因为最后一行至少有2个inline-block,才会出现两端对齐,而justify_fix类标签实际上是创建一个和列表宽度一样的inline-block,把最后一行的列表元素向左边"顶"过去。

实际用的时候,先用响应式设计视图,把宽度调到需要适配的最大宽度,比如1920px,看一行可以放下多少个列表元素,然后减2就可以了。

4.如果列表元素是动态插入的话,在列表元素间要加空格,否则在现代浏览器中,布局无效

ff

ie8

解决

可以看到avalon根据模板,动态插入的列表元素之间没有间距。

最后看下,用text-align:justify模拟的flexbox效果是否和flexbox一样

下面flexbox的justify-content设置的是space-around.

例子下载

如果您觉得本文的内容对您有所帮助,您可以打赏我:

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号