详细介绍弹性盒模型(display:flex)

Posted 上善若水

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了详细介绍弹性盒模型(display:flex)相关的知识,希望对你有一定的参考价值。

弹性盒模型,即Flexbox,是css3中的新特性,其实弹性盒模型的原身是dispaly:box;这里,我们暂时不考虑旧的,我们只看新的。

为容器指定弹性盒子,只需在父元素(也就是容器)中设置:display:flex;(注意,webkit内核的需要加webkit前缀,行内元素设置弹性盒子的话,设置display:inline-flex;而且,设置了弹性盒子,子元素的float,clear,vertical属性都将失效)。

弹性盒子默认有两条轴,横轴和纵轴,默认横轴为主轴(默认自左向右)纵轴为辅轴(默认自上而下)。设置了display:flex的容器(也就是父元素)的属性有:flex-direction、flex-wrap,justify-content,flex-flow,align-items,align-content;

其中:flex-direction决定了主轴的方向,其值有:row(默认值,自左向右)/row-reverse(自右向左)/column(主轴为垂直的,自上而下)/column-reverse(自下而上)。

flex-wrap定义一排容不下的时候是否换行,默认为nowrap不换行(一行容不下时,各条目的宽度会按比例缩小)。wrap为正常换行。wrap-reverse是换行时第一行跑到了下面,第二行跑到了上面(暂时还没想好如何描述更清楚)。

flex-flow是flex-direction和flex-wrap的合并写法。默认为row nowrap。

justify-content定义了条目在主轴上的排列方式:有左对齐flex-start(默认值),右对齐flex-end,居中对齐center,两端对齐space-between,等分space-around即每个条目两端的空隙相等。

align-item定义了条目在纵轴上的排列方式:有顶部对齐flex-start,底部对齐flex-end,居中对齐center,strecth(默认值,如果条目不设置具体数值的高度,则高度会沾满整个父元素的高度),baseline,以条目里的第一行文字的基线为准。

align-content定义了多跟轴线时,条目的在纵轴的对齐方式,如果只有一根主轴线则该属性不起作用。值和justify-content的值是一样的。

 

说完容器(也就是父元素)所拥有的属性,该来说说容器中的条目(也就是子元素)所用有的属性了,不能父亲一手遮天,我们崇尚自由民主,所以,父亲有属性,孩子也有属性。

孩子的属性都有:order,flex-grow,flex-shrink,flex-basis,(flex),align-self。

order定义了子元素出现的排列先后,值越小,排列越靠前,默认为0。

flex-grow(看到grow我们就应该联想到变大)定义了子元素的放大比例,默认为0,表示即使父元素还有剩余空间也不放大该子元素。设父元素的宽度为700px,三个子元素宽度分别为200px,如果所有子元素的flex-grow的值为1,则如果父元素有剩余空间,子元素会等比例放大,即剩余出来的100/3分给三个孩子;如果是一个子元素flex-grow为1,一个为2,第三个为3,则三个子元素分别多分到,100*(1/6),100*(2/6),100*(3/6)。

flex-shrink(看到shrink,我们就赢联想到变小)定义了子元素的缩小比例,默认为1,当容器空间不足时,如果各个条目的flex-shrink值均为1,则表明等比例缩小,如果为0,则表示不缩小。

剩余的几个条目属性我们稍后再说。。

 

以上是关于详细介绍弹性盒模型(display:flex)的主要内容,如果未能解决你的问题,请参考以下文章

弹性盒模型flex

弹性盒布局display:flex详解

弹性盒模型,FLEX

弹性盒模型

弹性盒模型

Flex弹性盒子布局