弹性(Flex)布局的使用

时间: 2020-02-01阅读: 87标签: 布局

最近我参与实施的两个项目中,一个页面交互复杂,而另一个相对传统,两个项目相比之下凸显出了页面布局样式的时间占比不可忽视,使用了弹性布局代码量精简了不少。

虽说如此,弹性布局往往会有些潜在的问题,且改动后,要立即查看页面也需要不少时间,因此我把项目中使用弹性布局过程中遇到的问题稍作整理,为大家以后使用时,可以有效规避这些麻烦。

 

使用场景

前端开发中,网页布局是很重要的一部分。之前传统布局方案中,基本依赖display + position + float实现,虽然能实现垂直居中,等比排布等,但有时会不够准确并且使css语句过多。

弹性布局最大的优点就是弹性,虽然使用百分比或者媒体查询也可以实现响应布局,但我认为以下几种情况下,flex布局是比较好的选择:

  • 视口中的特定块按照比例进行缩放
  • 一些以基准线对齐的布局
  • 模块垂直居中,水平居中
  • 左中右弹性布局

 

常用属性

1、Flex布局概念

flex全称是flexbox(flexible Box),即弹性盒子。这一模块提供更加有效的的方式制定、调整和分布一个容器里的项目布局,即使他们的大小是未知或者是动态的即弹性的。

包围在外面的即容器,内部的即为项目,也就是说采用Flex布局的元素就是flex容器(display:flex或inline-flex),它的所有子元素称为flex项目。容器默认存在两根轴线,一根主轴(main axis),一根交叉轴(cross axis),项目默认沿主轴排列。

2、常用属性

flex-box(容器)和flex-item(项目)各自都有不同的属性,通过对它们进行不同的设置来对整体布局进行调整以达到想要的效果。主要属性包括:

flex-direction:

默认情况下,元素排布从左至右,从上至下。但有时在实际应用中,并不按照默认情况进行排布。默认的是row(从左至右),可以设置成column(从上至下)。如果需要设置成反向,则在后面加上“-reverse”。

justify-content:

规定元素在主轴上的对齐方式。默认的是flex-start(左对齐),可以设置成flex-end(右对齐)和center(居中),也可以设置成space-between(两端对齐,且让剩余空间均匀的分布在每两个元素之间)或是flex-around(剩余空间均匀包裹每一个元素,每两个元素之间的间距是边框距盒内元素距离的二倍)。

align-items:

规定元素在交叉轴上的对齐方式。默认是stretch,即元素在竖直方向上充满整个空间,可以设置成flex-start(起点对齐)、flex-end(终点对齐)和center(居中),除此之外,可以使用baseline对齐,即元素内部第一行文字的基线对齐。

align-content:

当flex盒内元素具有多条轴的时候可以使用。默认的是stretch,即轴线占满整个交叉轴。可以设置为flex-start(与交叉轴的起点对齐),flex-end(与交叉轴的终点对齐),center(竖直居中),和space-between以及space-around。

flex:

可以将flex-grow, flex-shrink, flex-basis进行连写。flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间。

浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为flex: 0 1 auto。简写还包括:

  • flex: 1; -->> flex: 1 1 0%; flex: none; -->> flex: 0 0 auto
  • flex: auto; -->> flex: 1 1 auto; flex: 0 auto
  • flex: initial -->> flex: 0 1 auto; 即flex的初始值

 

开发中遇到的问题

1、子元素被压缩

问题:当设置子容器的长度flex为1时,其他的子容器的长度会被压缩。

解决方法:设置其他子容器的flex-shrink属性为0,这样就不会被压缩。


2、图片使用flex会有间隙

问题:因为有基线的存在,图片会有一些间隙。

解决方法:设置图片的display为block就可以解决。

 

3、超出隐藏,overflow失效

问题:

text-overflow: ellipsis;不生效,省略号没有出现,而且过长的文字把子容器撑开,没有按预设的超出隐藏。

解决方法:

设子容器width:0;可能出在于子容器没有设置宽度,省略符可能需要对父元素设置宽度,设置为100%无效,当设置为0的时候,子容器恢复到设定的宽度,省略号也出现了。

 

4、flex导致设置的子元素宽高失效

问题:

父级设置display:flex后,子级设置的heigth:50px失效,只是被子元素撑开了高度。

解决方法:

flex-grow:0;flex-shrink:0;flex-grow属性为是否自动增长空间,flex-shrink属性为是否自动缩小空间,默认值为1,即自动增长/缩小。设置为0时,不会自动增长/缩小,防止固定大小的元素宽度发生变化。

 

5、flex布局滚动,子元素无法全部显示

问题:

父级使用flex布局,列表页设置flex:1;占满空闲空间,但是所有的列没有完全显示出来,滚动条也没有出现。

解决方法:

列表外部使用div或其他盒子包裹,使用flex布局,每个子元素设置最小宽度或实际宽度,或者设width: 0。


使用注意

  1. 弹性布局下每一个item默认是没有间隔的。
  2. 弹性布局默认不改变项目的宽度,但是它默认改变项目的高度,align-self属性可以改变这种行为,默认值是stretch。
  3. flex只是比例,但不会换行,可以设置子容器的宽度的百分比,来达到换行的效果,或者使用flex-wrap进行换行。
  4. flex基本可以完全取代float,所以如果使用Flex布局,就尽量用flex的属性取代浮动效果。
  5. flex的布局会使子容器的float、clear和vertical-align属性失效。

作者:霍俊丽


吐血推荐

1.站长广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入...

2.休闲娱乐: 直播/交友    优惠券领取   网页游戏   H5游戏

链接: http://www.fly63.com/article/detial/7413

css3 弹性盒布局的使用-Flex

css3 的Flex弹性盒的布局是一个用于页面布局的全新CSS3模块功能。它可以把列表放在同一个方向(从左到右或从上到下排列),并且让这些列表能延伸到占用可用的空间。较为复杂的布局可以通过嵌套一个伸缩容器

CSS实现自适应两栏布局方法

浮动+margin第一种: 左侧栏固定宽度向左浮动,右侧主要内容则用margin-left留出左侧栏的宽度,默认宽度为auto,自动填满剩下的宽度。 第二种:左边绝对定位(脱离文档流,不占位置)

CSS中的圣杯布局与双飞翼布局

什么是圣杯布局?所谓圣杯布局就是用于实现一个两侧宽度固定,中间宽度自适应的三栏布局;什么是双飞翼布局?和圣杯布局一样,双飞翼布局也是用于实现一个两侧宽度固定,中间宽度自适应的三栏布局,就是布局的形式上存在差异 

网站设计和布局的重要性和过程

网站的设计是吸引客户的非常重要的因素。如今,互联网上存在着很多竞争,每个人都可以点击其客户,但是只有少数人能吸引他们。这通常是由于网站给人的第一印象。

Web布局:display属性

经过 CSS盒模型 和视觉格式化模型两个章节中的学习,我们有了一个清晰的概念。即 在CSS中插何一个元素都是一个盒子,甚至是文本节点也是一个盒子(匿名盒子);都有自己的视觉格式化(不同的盒子)

IOS 浏览器页面布局错位(如:点不到)的分析与解决

IOS 浏览器软键盘的拉起与收缩、微信 IOS 浏览器底部导航条的显示与隐藏,很容易导致页面布局错位(相对窗体的绝对定位元素):明明按钮在这里,却要在上面一点儿点击屏幕才能点到它

移动端布局方案,简单高效,完美适配各种机型

rem布局:使用rem作为元素大小的单位,rem=fount-size,根据不同的屏幕宽度设置不同的fount-size值,这样元素也会跟着屏幕变大或变小,第二步:使用postcss-px2rem-exclude将px转换为rem

flex的各种布局

Flex是Flexible Box的缩写,意为弹性布局,用来为盒状模型提供最大的灵活性。设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。任何一个容器都可以指定为Flex布局。

响应式布局

Responsive web page响应式布局/自适应网页,可以根据浏览器设备不同(pc,pad,phone)而自动的更改布局,图片,文字效果,不会影响用户体验

css如何实现n宫格布局?

现在的APP界面基本都是大同小异, 宫格布局现在基本成了每个APP必然的存在.带边框, 先解释一个小技巧, 如何实现正方形, 保证看一遍就会, 结论就是:padding的值如果是百分比

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全