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)表示无论如何都不伸缩。

flex招式心法的更多相关文章

  1. Java正则速成秘籍(一)之招式篇

    导读 正则表达式是什么?有什么用? 正则表达式(Regular Expression)是一种文本规则,可以用来校验.查找.替换与规则匹配的文本. 又爱又恨的正则 正则表达式是一个强大的文本匹配工具,但 ...

  2. 解密DNSPOD应对DDoS攻击招式!

    最近,安全专家Incapsula在最新版<DDoS威胁环境报告>指出.现在实施DDoS攻击的人仅仅有两类:一类是专业网络黑客.而还有一类就是所谓的botter. 简言之,booter就是僵 ...

  3. Netty基础招式——ChannelHandler的最佳实践

    本文是Netty系列第7篇 上一篇文章我们深入学习了Netty逻辑架构中的核心组件EventLoop和EventLoopGroup,掌握了Netty的线程模型,并且介绍了Netty4线程模型中的无锁串 ...

  4. Netty常用招式——ChannelHandler与编解码

    本文是Netty系列第8篇 上一篇文章我们深入学习了Netty逻辑架构中的核心组件ChannelHandler和ChannelPipeline,并介绍了它在日常开发使用中的最佳实践.文中也提到了,Ch ...

  5. 【腾讯Bugly干货分享】Android进程保活招式大全

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57ac4a0ea374c75371c08ce8 作者:腾讯——张兴华 目前市面上 ...

  6. Android 进程保活招式大全

    目前市面上的应用,貌似除了微信和手Q都会比较担心被用户或者系统(厂商)杀死问题.本文对 Android 进程拉活进行一个总结. Android 进程拉活包括两个层面: A. 提供进程优先级,降低进程被 ...

  7. [重构到模式-Chain of Responsibility Pattern]把Fizz Buzz招式重构到责任链模式

    写一段程序从1打印到100,但是遇到3的倍数时打印Fizz,遇到5的倍数时打印Buzz,遇到即是3的倍数同时也是5的倍数时打印FizzBuzz.例如: 1 2 Fizz 4 Buzz Fizz 7 8 ...

  8. [转] 面向对象原则之GOF是招式,九大原则才是精髓

    只有到了一定层次后才会真正的深入体会到面向对象的一些知识点啊! 不谈具体程序,谈的是你对软件的理解 模式: 每一个模式描述了一个在我们周围不断重复发生的问题,以及该问题的解决方案的核心. “模式”这个 ...

  9. Android 进程保活招式大全(转载)

    目前市面上的应用,貌似除了微信和手Q都会比较担心被用户或者系统(厂商)杀死问题.本文对 Android 进程拉活进行一个总结. Android 进程拉活包括两个层面: A. 提供进程优先级,降低进程被 ...

随机推荐

  1. Flask开发天气查询软件,带你掌握pipenv的使用与手机Termux下的部署

    关于pipenv 昨天介绍了pipenv这个相比于virtualenv更高端大气上档次的虚拟环境管理软件,但看了下流量貌似不是很受欢迎,也许是我介绍的不够好吧.那么今天就拿它做一个例子,开发一款天气预 ...

  2. .Net Core的API网关Ocelot的使用(二)[负载,限流,熔断,Header转换]

    网关的负载均衡 当下游拥有多个节点的时候,我们可以用DownstreamHostAndPorts来配置 { "UpstreamPathTemplate": "/Api_A ...

  3. Python面试180道题

    版权声明:本文为CSDN博主「CSDN学院官方账号」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明. 原文链接:https://blog.csdn.net/csd ...

  4. jenkins的部署

    一.jenkins相关工具安装 基于tomcat安装iptables  -F setenforce  0 systemctl stop firewalld.service Jdk安装 wgt  htt ...

  5. GitHub 上值得参考的完整的 iOS-App 源码

    转自:https://www.zhihu.com/question/28518265 作者:wjh2005链接:https://www.zhihu.com/question/28518265/answ ...

  6. 自定义 cell

    自定义 cell 1 什么是自定义 cell 自定义 cell 即 tableView,collectionView,scrollView中的 cell 使用的时候不能满足我们使用 cell 的需求, ...

  7. HihoCoder1466-后缀自动机六·重复旋律9

    小Hi平时的一大兴趣爱好就是演奏钢琴.我们知道一段音乐旋律可以被表示为一段字符构成的字符串. 现在小Hi已经不满足于单单演奏了!他通过向一位造诣很高的前辈请教,通过几周时间学习了创作钢琴曲的基本理论, ...

  8. BZOJ 3108: [cqoi2013]图的逆变换

    3108: [cqoi2013]图的逆变换 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 627  Solved: 415[Submit][Statu ...

  9. HDU-6115

    我们将A省简化为由N个城市组成,某些城市之间存在双向道路,而且A省的交通有一个特点就是任意两个城市之间都能通过道路相互到达,且在不重复经过城市的情况下任意两个城市之间的到达方案都是唯一的.聪明的你一定 ...

  10. 洛谷 题解 P2296 【寻找道路】

    Problem P2296 [寻找道路] solution 首先声明,这题我用了spfa,而: 关于spfa:它死了. 杀手: NOI 2018−T1 出题人 感谢出题人,没有卡spfa 用时: 20 ...