Make flex-grow expand items based on their original size

前端 未结 4 2005
再見小時候
再見小時候 2020-11-22 12:07

I have 3 buttons in a row which all vary in width. I want them to all gain width the same to fill the remaining width of the row, so the widest will still be wider than the

相关标签:
4条回答
  • 2020-11-22 12:51

    Minimalistic answer with (hopefully useful, explanatory) alternatives:

    HTML:

    <div class="row-flex">
      <a href="#" class="button button--1">Single</a>
      <a href="#" class="button button--2">Larger title</a>
      <a href="#" class="button button--3">Another really large title</a>
    </div>
    

    CSS:

    .row-flex {
      display: flex;
    }
    
    .button {
      flex-grow: 1; /* make the item grow proportionally to its original size */
                    /* default value is 0, the item does not grow */
                    /* a meaningful default for flexbox items positioning with */
                    /* justify-content: <value>; */      
      padding: 10px;
      color: #fff;
      text-align: center;
    }
    
    .button--1 {
      background: red
    }
    
    .button--2 {
      background: green;
    }
    
    .button--3 {
      background: blue;
    }
    

    The following CSS declarations also work because all they do is override the default flex-grow: 0; to the (for the desired behavior required) flex-grow: 1;:

    .button {
      flex: auto;
      ...
    }
    

    which is a shorthand for:

    .button {
      flex: 1 1 auto;    
      ...
    }
    

    which is a shorthand for:

    .button {
      flex-grow: 1;
      flex-shrink: 1;
      flex-basis: auto;
      ...
    }
    
    0 讨论(0)
  • 2020-11-22 12:56

    Short Answer

    All you need to do is switch from flex: 1 to flex: auto.


    Explanation

    The flex-grow property factors in two key pieces of data:

    1. The free space in the row / column where it is being used.
    2. The value of the flex-basis property.

    Distribution of Free Space

    The flex-grow property distributes free space in the container among flex items in the same line.

    If there is no free space, flex-grow has no effect.

    If there is negative free space (i.e., the total length of flex items is greater than the length of the container), then flex-grow has no effect and flex-shrink comes into play.


    The flex-basis factor

    When flex-basis is 0, flex-grow ignores the size of the content in flex items and treats all space on the line as free space.

    This is absolute sizing. All space on the line is distributed.

    When flex-basis is auto, the size of the content in flex items is first deducted to determine the free space in each item. flex-grow then distributes the free space among items (based on each item's flex-grow value).

    This is relative sizing. Only extra space on the line is distributed.

    Here's an illustration from the spec:


    Examples:

    • flex: 1 (absolute sizing)

      This shorthand rule breaks down to: flex-grow: 1 / flex-shrink: 1 / flex-basis: 0

      Applied to all flex items, this will make them equal length, regardless of content. (Note that in some cases an override of default minimum sizing will be necessary for this effect to occur.)

    • flex-grow: 1 (relative sizing)

      This rule by itself will factor in both content size and available space, because the default value for flex-basis is auto.

    • flex: auto (relative sizing)

      This shorthand factors in both content size and available space because it breaks down to:

      • flex-grow: 1
      • flex-shrink: 1
      • flex-basis: auto

    More variations here: 7.1.1. Basic Values of flex

    additional keywords for search: difference between flex-basis auto 0 flex 1 auto

    0 讨论(0)
  • 2020-11-22 13:01

    Not sure if this is entirely what you are after, but if you just set flex-grow:1 instead of flex:1;, I think that is your required result:

    .row-flex {
      width: 100%;
      display: inline-flex;
      flex-direction: row;
    }
    
    .button {
      flex-grow: 1;
      padding: 10px;
      color: #fff;
      text-align: center;
    }
    
    .button--1 {
      background: red
    }
    
    .button--2 {
      background: green;
    }
    
    .button--3 {
      background: blue;
    }
    <div class="row-flex">
      <a href="#" class="button button--1">Single</a>
      <a href="#" class="button button--2">Larger title</a>
      <a href="#" class="button button--3">Another really large title</a>
    </div>

    0 讨论(0)
  • 2020-11-22 13:05

    Using flex property you can set proportions:

    .button {
      display: inline-block;
      padding: 10px;
      color: #fff;
      text-align: center;
    }
    
    .row {
      display: flex;
    }
    
    .button--1 {
      background: red;
      flex: 1 1 auto;
    }
    
    .button--2 {
      background: green;
      flex: 2 1 auto;
    }
    
    .button--3 {
      background: blue;
      flex: 3 1 auto;
    }
    <br/>
    
    <div class="row">
      <a href="#" class="button button--1">Single</a>
      <a href="#" class="button button--2">Larger title</a>
      <a href="#" class="button button--3">Another really large title</a>
    </div>

    0 讨论(0)
提交回复
热议问题