• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • flex-basis

    版本:CSS3

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

    Note:当一个元素同时被设置了flex-basis(除值为auto外)和width(或者在flex-direction: column情况下设置了height),flex-basis具有更高的优先级.

    示例

    /* 指定<'width'> */
    flex-basis: 10em;
    flex-basis: 3px;
    flex-basis: auto;
    
    /* 固有的尺寸关键词 */
    flex-basis: fill;
    flex-basis: max-content;
    flex-basis: min-content;
    flex-basis: fit-content;
    
    /* 在flex item内容上的自动尺寸 */
    flex-basis: content;
    
    /* 全局数值 */
    flex-basis: inherit;
    flex-basis: initial;
    flex-basis: unset;
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    IE11以上版本的浏览器都支持flex-basis

    语法

    flex-basis:auto| content| <width>

    这个flex-basis属性被指定为关键词content或者<width>

    取值

    • <width>:值可以是<length>;该值也可以是一个相对于其父弹性盒容器主轴尺寸的百分数。负值是不被允许的。默认为auto
    • content基于 flex 的元素的内容自动调整大小。

    Note:由于最初规范中没有包括这个值,在一些早期的浏览器实现的flex布局中,content值无效,可以利用设置(widthheight)为auto达到同样的效果。

    Note:简史

    • 最初,"flex-basis:auto"的含义是"参照我的widthheight属性"。
    • 在此之后,"flex-basis:auto"的含义变成了自动尺寸,而"main-size"变成了"参照我的widthheight属性"。实际执行于bug 1032922.
    • 然后呢,这个更改又在bug 1093316中被撤销了,所以"auto"变回了原来的含义;而一个新的关键字'content'变成了自动尺寸。(bug1105111包括了增加这个关键字).

    说明:

    说明:

    设置或检索弹性盒伸缩基准值。

    • 如果所有子元素的基准值之和大于剩余空间,则会根据每项设置的基准值,按比率伸缩剩余空间
    • 对应的脚本特性为flexBasis
    默认值auto
    适用于flex项,包括in-flow伪元素
    继承性
    动画性visual
    计算值指定值

    例子

    //HTML
    
    <ul class="container">
      <li class="flex flex1">1: flex-basis test</li>
      <li class="flex flex2">2: flex-basis test</li>
      <li class="flex flex3">3: flex-basis test</li>
      <li class="flex flex4">4: flex-basis test</li>
      <li class="flex flex5">5: flex-basis test</li>
    </ul>
    
    <ul class="container">
      <li class="flex flex6">6: flex-basis test</li>
    </ul>
    
    //CSS
    
    .container {
      font-family: arial, sans-serif;
      margin: 0;
      padding: 0;
      list-style-type: none;
      display: flex;
      flex-wrap: wrap;
    }
    
    .flex {
      background: #6ab6d8;
      padding: 10px;
      margin-bottom: 50px;
      border: 3px solid #2e86bb;
      color: white;
      font-size: 20px;
      text-align: center;
      position: relative;
    }
    
    .flex:after {
      position: absolute;
      z-index: 1;
      left: 0;
      top: 100%;
      margin-top: 10px;
      width: 100%;
      color: #333;
      font-size: 18px;
    }
    
    .flex1 {
      flex-basis: auto;
    }
    
    .flex1:after {
      content: 'auto';
    }
    
    .flex2 {
      flex-basis: max-content;
    }
    
    .flex2:after {
      content: 'max-content';
    }
    
    .flex3 {
      flex-basis: min-content;
    }
    
    .flex3:after {
      content: 'min-content';
    }
    
    .flex4 {
      flex-basis: fit-content;
    }
    
    .flex4:after {
      content: 'fit-content';
    }
    
    .flex5 {
       flex-basis: content;
    }
    
    .flex5:after {
      content: 'content';
    }
    
    .flex6 {
      flex-basis: fill;
    }
    
    .flex6:after {
      content: 'fill/-webkit-fill-available/-moz-available';
    }
    
    //HTML
    <div id="main">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
    
    
    #main{
     width:450px;
     height:300px;
     border:1px solid #ccc;
     display:-webkit-flex;/*safari*/
     display:flex;
    }
    
    #main div{
     -webkit-flex-grow:0;/*safari6.1+*/
     -webkit-flex-shrink:0;/*safari6.1+*/
     -webkit-flex-basis:80px;/*safari6.1+*/
     flex-grow:0;
     flex-shrink:0;
     flex-basis:80px;
    }
    

    效果图:

    上篇:flex-shrink

    下篇:place-items