Missing Flex attribute

[delaneyj]

Do do a sticky footer with flexbox you need to add flex:1 to the content. It appears vue-flex is missing that as an optional attribute.

[alexsasharegan]

I don't like using the shorthand since some browsers (version/vendor) don't parse it the same. What would the proposed attribute and css look like? There is a grow prop to grow the element's children via:

.vf__grow-children > * {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
}

How about props for grow, shrink, basis? They would be numeric/string value types to render inline css. It seems that the current grow boolean prop is a touch of a misnomer. It could be renamed to growChildren => grow-children in js/html respectively. Thoughts?

[delaneyj]

I honestly don't know enough to have a real opinion on it. Is there a way with vue-flex to do the sticky footer declaratively that I'm missing?

[alexsasharegan]

Something like this ought to work:

<-- body level tag -->
<flex-col tag="main" style="height: 100vh;">
  <header>Optional header content.</header>
  <section style="flex: 1;">
    Main page content. I grow to fill available space.
  </section>
  <footer>
    Sticky footer content. I have a fixed size based on my content.
  </footer>
</flex-col>

I think the flexbox sticky footer is more of a trick utilizing flexbox features than it is a single component. Not sure if there's a good way to make it very declarative in the vue-flex library. Let me know if you have ideas though! And if you can get this example working.

[alexsasharegan]

Closing due to inactivity.