flex-basis 与 width 的区别

flex-basis 与 width 的区别

概念

  • flex-basis

    指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing 来改变盒模型的话,那么这个属性就决定了 flex 元素的内容盒(content-box)的宽或者高(取决于主轴的方向)的尺寸大小。

  • width

    指定了元素内容区的宽度. 内容区在元素padding,border和margin里面

区别

  • 只有在容器为 display: flex 时,flex-basis 才起作用

  • flex-direction 决定了 flex-basis,只指主轴方向

    • flex-direction: row 时,flex-basis 指的是项目的 width
    • flex-direction: column 时,flex-basis 指的是项目的 height
  • 当在 flex 容器,主轴方向默认时,项目同时拥有 widthflex-basis ,项目的宽度取决于 flex-basis,主轴方向 column 时,同样是 flex-basis 决定高度

  • 当项目 position: absolute 时,flex-basis 不在起作用 Absolutely-positioned flex items do not participate in flex layout. 宽度高度只和 width height 有关

    1555848419882

    .container {
        position: relative;
        width: 400px;
        height: 200px;
        border: 1px solid orange;
        background: rebeccapurple;
        display: flex;
        flex-wrap: nowrap;
        align-items: flex-end;
        text-align: center;
    }
    .item {
        flex-basis: 50px;
        background: lightskyblue;
        border: 1px solid red;
        flex-grow: 1;
        text-align: center;
    }
    .item1 {
        position: absolute;
        background: plum;
        width: 100px;
        height: 100px;
    }
    

    可以看到 item1 已经脱离文档流覆盖在了 item2 的上面,flex-basis: 50px 已无作用,取而代之的是 width: 100px; height: 100px;

总结

flex-basis 这个属性,前提是在 display: flex 的容器当中,主要起到的作用就是对项目的初始化大小进行 flex式 的定义,通过 flex-grow flex-shrink 进行放大缩小的弹性表现.

建议优先使用 flex 属性,flex属性是flex-grow, flex-shrinkflex-basis的简写,默认值为0 1 auto

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。

# flex  css 

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×