flex招式心法
2019-11-16 16:01:30来源:博客园 阅读 ()
flex招式心法
flex布局绝对是我们平常在布局中用的最多的一个属性,我们来看看它在can i use中的浏览器支持度:(截止到2019/11/16)
挖藕,凹森!支持度居然这么好,好到连ie也能支持大部分的flex布局的属性,那接下来我们就看看它的三大招式吧。
基本概念
任何一个元素,无论块级元素还是行内元素,都可以设置为flex容器,接下来都简称为“容器”,块级元素设置display: flex,行内元素设置display: inline-block。
元素一旦设置成为flex容器,其向下的第一级子元素将自动变成flex项目,接下来简称“项目”,并强制附上inline-block属性,同时项目的float、vertical-align、clear属性将全部失效。
容器默认有两根轴,一根主轴,一根副轴。主轴的默认方向为水平方向。
容器属性
1,flex-direction。定义主轴的方向,默认为row,即横向排列。可设置为column,表示纵向排列;
2,justify-content。定义项目在主轴上的排列方式,默认值为flex-start,可取值flex-start | flex-end | center | space-between | space-around。还有一个space-evenly,但这个属性不建议使用,因为它的支持度不高,尤其是移动端设备;
3,align-items。定义项目在副轴上的对齐方式,默认值为stretch。可能取值 flex-start | flex-end | center | stretch | baseline。着重说一下后两个,如果项目没有设置固定高度的话,stretch属性将把这个子项目拉长至充满整个高度,当然如果设置了项目的固定高度,那这个属性并不能起到什么作用。而baseline就厉害了,它会去取每个项目的第一行文字,无论文字大小,将基于文字底部对齐。
4,flex-wrap。定义项目在轴线上排不下的时候是否进行换行。默认值为nowrap。当设置为wrap时,将优先保证自身宽度,
这里并未列出一些例如flex-flow这样的组合属性,以及类似wrap-reverse这种冷门的取值,基本上flex容器理解这四个属性,已经可以满足绝大部分的布局需求。
项目属性
1,flex-grow。"grow"是成长的意思,flex-grow定义项目在容器存在多余空间时,是否放大自己。默认为0,表示不放大。如果有好几个项目设置了flex-grow属性大于0,则它们将根据flex-grow的比例蚕食剩余空间。
哟,这不就是当年那个所谓的圣杯双飞翼布局吗??现在实现起来真是廉价。
2,flex-shrink。定义项目在容器空间不足时是否缩小,默认值为1,即会缩小,0表示不肯缩小。那要是它喵的个个的flex-shrink都为0,又不换行,内容又多,会出现什么情况呢,那就是会超出。
3,flex-basis。定义项目在放入容器前的初始宽度,默认值为auto,即项目本身的大小。可以设置具体的像素,当width和flex-basis同时存在时,flex-basis的优先级将高于width。
但是这个属性很制杖,看了很多文章,flex-shrink做的事跟width做的事完全一样,所以我认为这算一个冗余属性。
4,align-self。表示项目单独搞特殊化,其属性值将覆盖父元素设置的align-items值,取值与align-items的取值完全一致。
5,组合属性flex:它是"膨胀,萎缩,初宽"的简写,即flex-grow + flex-shrink + flex-basis。默认值为0 1 auto。它有两个快捷值:auto(1 1 auto)表示等比例伸缩,以及none(0 0 auto)表示无论如何都不伸缩。
原文链接:https://www.cnblogs.com/zhangnan35/p/11871948.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:css布局技巧
下一篇:grid网格布局——色子布局
- CSS3--flex布局 2020-05-01
- Bootstrap 滚动监听+小工具+Flex(弹性)布局+多媒体对象 2020-04-20
- 弹性盒模型 2020-04-02
- 用flex布局实现栅格系统 2020-03-15
- flex布局实例--实现底部导航 2020-03-14
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash