flex布局

Posted 圈地自萌

tags:

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

flexflex-growflex-shrinkflex-basis三个属性的缩写。第二个和第三个参数(flex-shrinkflex-basis)是可选值。其默认值是0 1 auto

flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。

flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。

负值对该属性无效。

flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。

怎么理解这句话呢。

来做个实验吧。

1. flex 三个属性都设为默认值。 flex: 0 1 auto;

这种情况下,项目不会因为有剩余空间而放大,但是空间不够时,如果容器没设置宽度,而flex-shrink默认为1,那么项目就会缩小,文字换行。

2. flex: 1 1 auto;

看参考线位置,可以看出每个项目扣除内容后的剩余空间,是一致的,不管项目大小。空间放大,项目跟着放大,给每个项目扣除内容后的剩余空间,按照第一个值 (flex-grow)分配相同的尺寸。

3. flex: 1 1 auto; 第三个项目的 flex-grow: 2。

    <style>
        *{ /*实际开发中,别这样偷懒哦*/
            margin: 0;
            padding: 0;
            list-style: none;
        }
        div{
            /*width: 600px;*/
            margin: 0 auto;
        }
        ul{
            display: flex;
        }
        li{
            display: flex;
            align-items: center;
            justify-content: center;
            height: 40px;
            border: 1px solid red;
            flex:1 1 auto; /*3个值分别是flex-grow, flex-shrink, flex-basis*/
        }
        .div3{
            flex-grow: 2;
        }
    </style>
</head>
<body>
<div>
    <ul>
        <li></li>
        <li>一段文本</li>
        <li class="div3">另外一段文本长长长长长长长长</li>
    </ul>
</div>
</body>

先看效果图:

可以看出,第三个项目的剩余空间,是前面两个项目的2倍。简写 flex 3个值均为默认。 

3. 如果省略了默认的值呢。

style部分改成这样:

        li{
            display: flex;
            align-items: center;
            justify-content: center;
            height: 40px;
            border: 1px solid red;
            flex:1;
        }
        .div1{
            flex: 2;
        }

前两个项目flex 值为 1 的宽度:

flex值为 2 的宽度:

可以看出,flex为2的项目,无论内容占据多少空间,项目的宽度是flex为1的项目的两倍。在省略默认值不写的情况下,flex-basis 的值等同为 0 。

When omitted from the flex shorthand, its specified value is 0.

4. 如果第三个 flex-basis的值为0的情况。表现形式和不写默认值的情况一致,flex 为2的项目的总宽度是其他flex为1的项目宽度的2倍。

 

来看下w3.org上的文档。

Name: flex-basis
Value: content | <‘width’>
Initial: auto
Applies to: flex items
Inherited: no
Percentages: relative to the flex container’s inner main size
Media: visual
Computed value: as specified, with lengths made absolute
Animation type: discrete for keywords, otherwise as length, percentage, or calc

Authors are encouraged to control flexibility using the flex shorthand rather than with flex-basis directly, as the shorthand correctly resets any unspecified components to accommodate common uses.

建议用 flex 简写,因为简写准确重置未指定属性。

以上是关于flex布局的主要内容,如果未能解决你的问题,请参考以下文章

UniApp的Flex布局

Vue 中 Flex布局

进一步了解flex布局

弹性布局(Flex)布局介绍

Flex布局实践

Flex布局详解