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

posted @ 2019-11-16 20:57  陌上兮月  阅读(...)  评论(...编辑  收藏