浅谈flex布局中小技巧

最近有个面试,面试官问到,在一个横向布局上,假设有三个div,每个宽度为定宽apx,如果想使两侧宽度为x,中间div间间隔为2x。x可以自适应。如下图:

怎么做很简单,两行代码就搞定:

justify-content 常用属性有:flex-start | flex-end | center | space-between | space-around

前三个就是字面意思,向行起始位置对齐,向行结束位置对齐,向行中间位置对齐。

后两个中,space-between :元素会平均地分布在行里。如果最左边的剩余空间是负数,或该行只有一个子元素,则该值等效于‘flex-start‘。在其它情况下,第一个元素的边界与行的主起始位置的边界对齐,同时最后一个元素的边界与行的主结束位置的边距对齐,而剩余的伸缩盒项目则平均分布,并确保两两之间的空白空间相等。大白话就是会把第一个元素的位置与行起始位置对其,最后一个元素与行结束位置对其,中间的剩余空间平均分布。如下图:

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()在移动端还是要慎用。

最后还请大佬有什么即可以达到目的又有很好兼容性的办法还望不吝赐教。嘿嘿。

原文地址:https://www.cnblogs.com/jiasonglindeboke/p/9038750.html

时间: 2024-10-24 05:33:41

浅谈flex布局中小技巧的相关文章

浅谈flex布局

Flex布局,俗称弹性布局,有了这个布局,咱们做的事情很多,以前那些很难实现比如说垂直居中之类都不存在了. 盒模型布局依赖于float,display,定位之类的方式来布局,这种的布局对一些特殊布局来说很不方便,就如上面的垂直居中就不太好实现. 现在就让我来介绍一个Flex布局方式 他中的一些属性: flex-direction flex-wrap flex-flow justify-content align-items align-content 在这里,声明一点,使用了display:fl

浅谈图标布局

标题中的图标布局,其实指的是在一个块级容器中,从左至右水平罗列若干大小.间距相等的图标,一行排列满了后自动换行到下一行继续从左至右水平罗列.至于这个布局具体应该叫什么我也不清楚,总之他有点像我们的苹果或者安卓的桌面,也有点像微软的磁贴,还有点像已经被被关闭的webqq,如果你还是不知道我说的布局是什么,看一个图你马上就清楚了. 例图出自于hoorayos 图标布局初看是很简单的,前提是你已经确定了一行图标的个数,或者确定了容器的宽带.当容器的宽带不固定,而图标的大小固定时(也就是一行的图标个数不

谈一谈flex布局使用中碰到的一些问题

起因 工作以后由于大量使用到了flex布局而碰到了一些尚不清楚的问题,以及一些有意思的特性,在此写篇博客记录一下. flex三个值的含义 众所周知,flex布局所有的属性有两种:一种作用在弹性容器(Flex container)上,一种作用在弹性项目(Flex item)上,而flex就是作用在弹性项目上的属性. flex 是 flex-grow.flex-shrink.flex-basis 三个值的简写,这个值规定了弹性项目如何伸长或压缩以适应弹性容器中的可用空间. flex-grow 定义弹

浅谈ul布局以及table布局

我个人对于某些言论说要注重html语义化在布局中的应用,我反而不怎么感冒,试试兼容IE7&&项目期相对较赶的情况下,我还是推荐快速开发为主,兼容性强为主. 如果布局中需要用户边框,推荐div或者table布局:如果不需要边框,ul其实也是不错的一种布局方式. ul布局可以很好地适应布局内容自顶向上对齐地方式,如图.table永远都是垂直居中的方式             代码 ul布局css ul{ list-style-type: none; padding-left: 0px; mar

浅谈qt 布局器

在一个颜值当道的今天,无论买衣服,买车还是追星,颜值的高低已经变成了大家最看重的(不管男性女性都一样,千万别和我说你不是):而对于程序猿来说,开发一款软件,不再只注重逻辑和稳定性,美观和用户友好性也是我们不得不关注的一个重点了. 我们进入正题,今天主要和大家分享一下Qt方面关于布局管理器的使用: 一.基本概念   Qt 提供了几种在窗口部件上管理子窗口部件的基本方式.一共有3 种方法用于管理窗体上子窗口部件的布局:绝对位置法.人工布局法和布局管理器法.相比于使用固定尺寸和位置,布局提供了功能强大

浅谈Android布局优化

在现在的开发环境中,很容易让人忘了对布局进行优化,我们只需要在IDE中调整调整,然后再setContentView()一下就行,那么让我们来看看在这个过程中他做了什么: 1.读取文件 2.解析数据 3.展开布局 如果布局结构复杂的话,花费的时间就会越长,那么我们不妨来对结构进行写简单调整: 一.使用相对布局 作为一个开发人员我们可能首先接触到的应该是LinearLayout,因为他是个默认布局,这个布局用起来也比较简单.用久了我们会发现,稍微复制一点的结构用linearlayout的话,会嵌套的

老司机浅谈linux系统学习技巧

Linux起源于20世纪70年代,是一种优秀的操作系统系统.初次接触到linux这个系统是在大学期间,这样才发现除了windows外的另外一个有趣系统.开始抱着好奇的心态去了解,随着深入学习,笔者被它独有的魅力所吸引.即使它的可视化窗口操作模式并不如Windows操作系统那样完美,可是它的可维护性.操作系统低占用率.可扩展性却让它在服务器操作系统方面已经成为资深服务器工程师的首选的操作工具. 笔者刚开始学习linux的时候,也不是一帆风顺的,一次偶然的机会在网上看到<linux就该这么学>这本

浅谈Android布局

在前面的博客中,小编介绍了Android的极光推送以及如何实现登录的一个小demo,对于xml布局页面,摆控件这块的内容,小编还不是很熟练,今天小编主要简单总结一下在Android中的布局,学习过Android的小伙伴都知道,在安卓中有五大常用的布局,如下图所示: 接着,小编就来详细介绍这几种布局,小编是初学者,还请各位小伙伴多多指教哦.首先,我们来看: 第一个LinearLayout---线性布局,线性布局是我们在开发Android项目中最常用的的一种布局方式,线性布局的方向有两种,分别是垂直

浅谈C#之小技巧region指令

region指令 有的时候,为了完成一个需求,可能会写几十行.几百行.甚至几千行代码. 当代码数量非常多的时候,尽管你可以使用很详细的注释来帮助阅读,但也不太容易分清楚哪些代码在干什么事情. 因此,C#增加了一种语法格式--region,它的书写方式如下: #region 描述内容// 代码#endregion region和endregion必须成对书写,也就是说,你不能只写一个region或只写一个endregion,而且它们都是以一个#号开头. 这样做有什么好处呢?当你这样写了后,你就可以