首页>前端教程>CSS教程

CSS3第十五课:flex弹性布局,一维布局最好的方法(下)

过年最大的好处就是可以和孩子出门疯玩,不到天黑不回家。

疯玩.gif

一晃眼,又坐在教室里,开始上课写文章了。

一直写博客,但是今年想尝试一下自媒体,写写教育类的文章,算是新年的一个flag吧。

进入正题……

上一篇讲了作用在flex container上的6个属性,这篇文章讲解作用在flex items上面的6个属性。

没看上一篇的建议先补上再看这篇。

CSS3第十五课:flexbox弹性布局,一维布局最好的方法(上)

一、应用在flex items上的6个属性

1、order

用于排列flex items子项的顺序。默认值为0,可以为正值,负值。

.flex-item{
    order:-1;
    order:5;
    order:0;
}

这个和z-index层级有点像,但是没有那么复杂,默认值为0,大家都一样,谁的值小,就排在前面,按照值从小到大排列。

三个子项已经设置了对应的order值,通过改变第三个子项的order值看看排列顺序的变化。

See the Pen  order by zhaolanzhen (@mrszhao)  on CodePen.


2、align-self

用于对齐flex items子项中的某一项。可以覆盖为flex container定义的align-items的值。

align-items是父容器为子元素全体定义对齐方式,align-self是定义一个子项个体。

align-self: auto | stretch | flex-start | flex-end | center | baseline;

相比align-items的值,多了一个auto,如果用auto的话,表示继承父元素设置的align-items的值。

看如下测试,为flex container设置了align-items:baseline,然后为第一个flex item设置不同的align-self值,看看有什么变化。

See the Pen  align-self by zhaolanzhen (@mrszhao)  on CodePen.


3、flex-grow

该属性IE12以上支持。

grow具有生长、扩展的意思,flex-grow用于设置子项如何扩展,占据父容器的剩余空间。

感觉有点像分家产呢,如果比例一样,就平分父母剩余的家产,如果比例不一样,就按照比例分配。

flex-grow的默认值为0,可以为小数,不能为负数。

父容器剩余空间的总量看做1.

分为两种情况:

第一种:只有一个子项设置了flex-grow。

  • flex-grow小于1,则按照比值扩展。比如flex-grow:0.25,则扩展父容器剩余空间的25%。

  • flex-grow大于等于1,则占用父容器所有剩余空间。

改变第二个子项的flex-grow的值,看看变化。

See the Pen  flex-grow1 by zhaolanzhen (@mrszhao)  on CodePen.

第二种:多个子项设置了flex-grow的值。

  • flex-grow值的总和小于1,则父容器剩余空间没有占用完,每个子项扩展的值等于和父容器总量的比值。比如,一个子项的flex-grow:0.25,则扩展了25%的父容器剩余空间。一个flex-grow:0.5,则扩展50%的空间,剩余的25%没有占用。

  • flex-grow值的总和大于等于1,则父容器剩余空间全部占用,各个子项的扩展空间等于它们flex-grow的比值。

如下案例,第一个子项flex-grow为0.5,第二个,第三个为0,改变第二个子项的值,看看变化。

See the Pen  flex-grow2 by zhaolanzhen (@mrszhao)  on CodePen.

当为0.25的时候,父容器还剩下25%没有占据,为0.5的时候,和第一个子项各占据一半,父容器空间被用完。为1的时候,,0.5:1,各自扩展父容器剩余空间的2:1的比例。为2的时候,是4:1,为0的时候,不扩展,第一个子项占据父容器剩余空间的50%。

4、flex-shrink

shrink具有“收缩”的含义。

该属性用于当父容器空间不够的时候,子项如何收缩。

可以有小数,不支持负数,和flex-grow不一样的是,默认值为1,表示默认要收缩,设置为0,表示不收缩。

父容器不足的空间为收缩空间,总量为1.

当某个子项不收缩的时候,可能导致溢出父容器,所以这种情况要确保其他子项要收缩并且总宽度不溢出。

多个子项设置了flex-shrink,按照比值来收缩以适应父容器。如果都是1:1:1,则收缩的比值都是一样。是1:2:1,第二个子项收缩的范围是第一个和第三个的两倍。

See the Pen  flex-shrink by zhaolanzhen (@mrszhao)  on CodePen.

5、flex-basis

设置flex items子项的初始大小。默认是内容框大小,除非设置了box-sizing为border-box。

注意:如果为元素设置了flex-basis(除auto之外)和width(或flex-direction:column的高度),则flex-basis优先。

flex-basis的默认值为auto,表示内容宽度。可以设置为px、%、em等单位的值。

也有关于“content”的各种属性值,但是谷歌目前不支持。

当父容器空间不足的时候,子项的宽度也许并不是flex-basis的值,因为默认子项会收缩。

下面案例父容器的总宽度是400px,当子项的flex-basis总和超过父容器的时候,会自动收缩,这时的宽度并不是flex-basis的值。

See the Pen  flex-basis by zhaolanzhen (@mrszhao)  on CodePen.

6、flex

flex是flex-grow、flex-shrink、flex-basis的缩写。

flex可以有一个、两个或三个值。

有一个值的时候

  • flex : auto ; 等价于flex : 1 1 auto ; 子项会扩展剩余空间,会收缩以适应容器,会根据内容宽高自动调整。

  • flex : none ; 等价于flex : 0 0 auto ; 子项不灵活,不会扩展或收缩,会根据内容宽高调整大小。

  • flex : initial ; 这是默认值,等价于 flex : 0 1 auto ; 子项不扩展,但是会收缩,会根据内容宽高调整。

  • flex : 无单位的正数 ; 等价于 flex : 正数 1 0;指定子项的扩展空间的比例。此时的flex-basis为0.

  • flex : 有单位的正值 ;  比如 flex : 40px ; flex : 3em ; 此时这个值表示flex-basis。flex : 30%等价于:flex : 1 1 30%。

有两个值的时候

  • 第一个值必须是flex-grow,第二个值可能是flex-shrink,或者flex-basis。

  • 比如flex : 2 2,对应的是flex:flex-grow flex-shrink。

  • 比如flex : 1 30px,对应的是flex:flex-grow flex-basis。

有三个值的时候

  • flex : 2 2 10%,对应的是flex:flex-grow flex-shrink flex-basis。

默认情况下,子项不会收缩到最小内容大小以下,可以通过设置min-width或min-height来改变。

二、flex补充说明

应用了flex的容器,float、clear、vertical-align都是无用的。

width也要慎用,毕竟是弹性布局,关键在于弹性。

早期各种乱七八糟的语法结构,私有前缀,在9102来临的时候,可以抛弃了,毕竟移动端已经是妥妥的可用了,IE12也几乎都支持了,pc端过几年应该没问题了吧,不过那时候还开不开发pc端的应用已经是个问题了。

最后,附上一个练习flex弹性布局的游戏网站,值得一看。

https://flexboxfroggy.com/


点赞


2
保存到:

相关文章

Top