grow in last row with flex

 

please look at my very simple example of flex layout:

There is

  • container with
  • flex box turned on (display: flex)
  • wrapping (flex-wrap: wrap)
  • some items in it that have
  • flex-grow is set to 1 = all items will scale equally
  • flex-shrink is 0 = any items will not be scale down
  • flex-basis = all items have same base width

    • Despite all the rulesets, items in last row have different width? How it this possible when the flex-grow says that all items will be scaled equally?

    Quote from http://www.w3schools.com/cssref/css3_pr_flex-grow.asp:

    The flex-grow property specifies how much the item will grow relative to the rest of the flexible items inside the same container .

    That's cool, but my items in last row grow little bit more that others. Any ideas? 

    flex {
  display: flex;
  flex-wrap: wrap;
}
item {
  flex: 1 0 4rem;
  height: 4rem;
  margin: 0.5rem;
  border: 1px solid lightblue;
}
    <flex>
  <item></item>
  <item></item>
  <item></item>
  <item></item>
  <item></item>
  <item></item>
  <item></item>
  <item></item>
</flex>

    The flex grow and shrink factors are basically used to Resolve Flexible Lengths. But that happens independently for each flex line (row or column).

    To resolve the flexible lengths of the items within a flex line : [...]

  • If using the flex grow factor

    Find the ratio of the item's flex grow factor to the sum of the flex grow factors of all unfrozen items on the line . Set the item's target main size to its flex base size plus a fraction of the remaining free space proportional to the ratio.

  • If using the flex shrink factor

    For every unfrozen item on the line , multiply its flex shrink factor by its inner flex base size, and note this as its scaled flex shrink factor. Find the ratio of the item's scaled flex shrink factor to the sum of the scaled flex shrink factors of all unfrozen items on the line. Set the item's target main size to its flex base size minus a fraction of the absolute value of the remaining free space proportional to the ratio.

    • The CSS Working Group is aware of this problem and plans to introduce some way to fix it in Flexbox Level 2

    Solve the “items on the last line get way too big when you're flexing” problem. More generally, “make items have a consistent flexed size, regardless of how much extra space is on each line”.

  • Possible solution - fill out the last line with “phantom copies” of the last item, flex with them in, then remove them.
  • Possible solution - calculate minimum values of 1fr and alignment free space across the entire flexbox (instead of per-line) and use that.
    • 链接地址: http://www.djcxy.com/p/75698.html

    上一篇: 长包裹柔性物品推动其他人

    下一篇: 在flex的最后一行增长