Flex Layout: Add "stretch" alignment option

[cbirdsong]

What problem does this address?

For vertical alignment, the row layout defaults to align-items: center; and the stack layout defaults to align-items: flex-start;, resulting in this layout:

The existing alignment options only allow you to adjust the position of the container's children to top/middle/bottom or left/center/right, but you can't set them to fill the container.

What is your proposed solution?

Add a "stretch" layout option (align-items: stretch) so you can ensure the flex children always fill the container, like this:

Codepen example: https://codepen.io/cbirdsong/pen/KKeoqOq

[kathrynwp]

Hey there @cbirdsong I think this may be a duplicate of #41280 so I'm going ahead and closing this, but if I'm mistaken, please let me know and I'll have another look. Thanks!

[cbirdsong]

Yeah, pretty much, though I was thinking about this more broadly than the row/stack blocks? Ideally this would also apply to buttons and anywhere else that uses flex layout.

Also, should these have the "[Feature] Layout" label? That is where I looked for duplicates before filing this.

[kathrynwp]

I went ahead and reopened this issue and added the tag you suggested to both this issue and the older one. Thanks a lot, @cbirdsong!

[phil-sola]

I agree this would be a welcome addition to any flex settings. +1 from me

[tellthemachines]

Closing as "stretch" has now been added for all flex layouts in #47134 (In horizontal orientation it's in the alignment options, and in vertical in the justification options).