浅谈flex布局中小技巧
最近有个面试,面试官问到,在一个横向布局上,假设有三个div,每个宽度为定宽apx,如果想使两侧宽度为x,中间div间间隔为2x。x可以自适应。如下图:
怎么做很简单,两行代码就搞定:

space-around:弹性盒子元素会平均地分布在行里,两端保留子元素与子元素之间间距大小的一半。如果最左边的剩余空间是负数,或该行只有一个伸缩盒项目,则该值等效于'center'。在其它情况下,伸缩盒项目则平均分布,并确保两两之间的空白空间相等,同时第一个元素前的空间以及最后一个元素后的空间为其他空白空间的一半。如一图。
说到这其实都是废话,这些都是flex布局初始学习就会接触到的。主要是这个面试官又问,如果中间不是2x,是x呢,也就是每个间隙与两侧的间隔相同。也就是这样:
这个问题我一开始想的是两侧设置padding,中间用justify-content: space-between;可是这样在不同的屏幕上看到的两侧padding值肯定是不同的,所以中间的间隙与两侧就不想等了。。。所以最后我也没想出来。回来之后发现justify-content居然还有space-evenly这么个属性!这个属性干嘛用的不言而喻。均匀排列每个元素,每个元素之间的间隔相等。上题就解决了。但是space-evenly的兼容性比起常用的justify-content值来说还是要差不少。
我们不能只满足与解决一道面试题,再实际情况下可能会有很多奇葩的情况,比如说上图4个x改成3个x,一个2x(虽然我是从来没见过这种奇葩的设计。。)那又该怎么办呢?
这里我想到了css3的cacl(),这玩意儿百分比,px值混搭都能计算,强的一批。比如实现上面的要求:
也一样可以达到效果。(假设a的值为100px)而且不管是什么情况都可以计算出你想要的大小,简直不要太爽。
可是,cacl()虽然兼容性比起space-evenly要好一点。如下图:
我们还是看到Android Browser还是只有部分支持。所以cacl()在移动端还是要慎用。
最后还请大佬有什么即可以达到目的又有很好兼容性的办法还望不吝赐教。嘿嘿。
浅谈flex布局中小技巧的更多相关文章
- 浅谈flex布局
Flex布局,俗称弹性布局,有了这个布局,咱们做的事情很多,以前那些很难实现比如说垂直居中之类都不存在了. 盒模型布局依赖于float,display,定位之类的方式来布局,这种的布局对一些特殊布局来 ...
- 浅谈 Qt 布局那些事
Qt 布局那些事是本文介绍的内容,直接进入主题.GridLayout是一个非常强大的布局管理器,它可以实现很多复杂的布局,名字中暗示它将所有控件放置在类似网格的布局中.^__^GridLayout有两 ...
- 谈一谈flex布局使用中碰到的一些问题
起因 工作以后由于大量使用到了flex布局而碰到了一些尚不清楚的问题,以及一些有意思的特性,在此写篇博客记录一下. flex三个值的含义 众所周知,flex布局所有的属性有两种:一种作用在弹性容器(F ...
- 浅谈 WPF布局
我们首先来了解一下图形化用户界面(Graphic User Interface)也就是我们常常听到的GUI.举个简单的例子,同样是数据,我们可以用控制台程序加格式控制符等输出,但是这些都不如GUI来的 ...
- 浅谈qt 布局器
在一个颜值当道的今天,无论买衣服,买车还是追星,颜值的高低已经变成了大家最看重的(不管男性女性都一样,千万别和我说你不是):而对于程序猿来说,开发一款软件,不再只注重逻辑和稳定性,美观和用户友好性也是 ...
- 浅谈CSS布局
在No.4中谈及了下盒子模型,引出布局模型 1.布局模型有三类: 1)流动模型 flow(默认) 2)浮动模型 float 3)层模型 layer 2.文档流 :指的是文本沿着从左到右的方向展开 ...
- 浅谈Android布局
在前面的博客中,小编介绍了Android的极光推送以及如何实现登录的一个小demo,对于xml布局页面,摆控件这块的内容,小编还不是很熟练,今天小编主要简单总结一下在Android中的布局,学习过An ...
- 老司机浅谈linux系统学习技巧
Linux起源于20世纪70年代,是一种优秀的操作系统系统.初次接触到linux这个系统是在大学期间,这样才发现除了windows外的另外一个有趣系统.开始抱着好奇的心态去了解,随着深入学习,笔者被它 ...
- 浅谈ul布局以及table布局
我个人对于某些言论说要注重html语义化在布局中的应用,我反而不怎么感冒,试试兼容IE7&&项目期相对较赶的情况下,我还是推荐快速开发为主,兼容性强为主. 如果布局中需要用户边框,推荐 ...
随机推荐
- 在虚拟机中搭建qduoj(一)——准备工作
为缩减篇幅,已略去ubuntu镜像下载.虚拟机(VirtualBox.VMware)安装等操作,若有疑问请搜索相关教程. 1.虚拟机系统安装 本教程使用Ubuntu16.04 server版本(des ...
- 【设计模式】原型模式 Pototype Pattern
前面讲了创建一个对象实例的方法单例模式Singleton Pattern, 创造多个产品的工厂模式(简单工厂模式 Simple Factory Pattern, 工厂方法模式 FactoryMothe ...
- spring javaconfig druidsource
package dataConfig; import java.sql.SQLException; import org.springframework.context.annotation.Bean ...
- 高通平台如何避免误入FFBM模式
前面两篇博客分别介绍了通过fastboot和QFIL工具退出FFBM模式的方法.虽然售后的同学可以这么指导用户做恢复,但步骤多操作也麻烦,且属于事后处理,如果大面积高概率地出现,会严重影响用户体验.这 ...
- intellij idea 2017和Jprofiler 10的集成 报错问题
本来想用Jprofiler来分析一下自己写的Java项目,以提高代码执行效率和自己的编码能力.结果,官网和网上很多帖子都写了点出session->IDE integrations->选择i ...
- PM意识升级2.0
上一篇<质量:“PM,你怎么可以放弃我?!”>,我们匡正了PM的一个意识:质量是PM的底线和目标,也算是PM意识升级的1.0.同时提出,只有“正确的做正确的事”才是保证质量,且成本相对最低 ...
- vue(4)—— vue的过滤器,监听属性,生命周期函数,获取DOM元素
过滤器 vue允许自定义过滤器,我个人认为,过滤器有两种,一种是对数据的清洗过滤,一种是对数据切换的动画过滤 数据切换的动画过滤 这里还是利用前面的动态组件的例子: 这里由于没办法展示动画效果,代码如 ...
- SQL Server中将多行数据拼接为一行数据(一个字符串)
表A中id与表B中aid为一对多的关系 例如: 表A: id name a1 tom a2 lily a3 lucy 表B: id aid value b1 a1 B1 b2 a1 B2 b3 a2 ...
- Win7/Win8.1升级Win10后屏幕一直闪烁怎么办?
有些用户在把Win7/Win8.1升级到Win10正式版后,发现屏幕一直不停闪烁,以至于无法正常使用.出现这种情况的原因可能有很多,微软社区的论坛审阅人Alex_Shen给出了一种解决方案:进入安全模 ...
- 安装WebLogic失败,出现”[VALIDATION] [ERROR]:INST-07004: Oracle 主目录(O) 位置包含一个或多个无效字符“解决方案
题如图 解决方案: 在管理员cmd窗口定位到jdk bin目录,然后输入以下命令 java -jar F:\java\fmw_12.2.1.3.0_wls_quick_Disk1_1of1\fmw_1 ...