Changed uiModes Button to Flexbox

[tridip1931]

@kepta Can you review this.

[kepta]

Do we need the .wX ? I might be wrong but can't we substitute this with flex-grow / flex-shrink?

[tridip1931]

I believe flex-grow/flex-shrink only defines how much space to take in a given estate.
CSS grid helps a lot if we are using lots of widths
I thought we needed width minus the floats but right now I am not using them anywhere. We can delete it. @kepta

[bhousel]

I agree we might not need this, but I think the idea is for places where you have several joined things, (like buttons) you want them to try to share equal width.

e.g. for OK/Cancel, they'd have 50% width each, even though those words have very different natural width.

I've found I still need to set flex items with a width in order to get them to layout correctly. flexbox-grow is about how to distribute extra width to contained items, and flexbox-shrink is about how to steal width from them (I think - I might be wrong too).

[kepta]

Yup, but I feel we can simulate the case of proportions % with flex.
Suppose we want 2 guys to share 50:50, we can use simply use default flex.
if 75:25, flex-grow:3 and other to 1.

@tridip1931 @bhousel Is there a situation you guys can think where width% can't be replaced ?

[tridip1931]

Yes @bhousel I also faced this issue while working in flexbox for keeping some widths, upon looking for answers in google, I found this article very helpful.
https://css-tricks.com/things-ive-learned-css-grid-layout/

TL;DR We should not depend entirely on flexbox for layout purposes.

How do you feel about this guys? @bhousel @kepta

[kepta]

@tridip1931 css-grid is amazing, but we can't use it yet because of very low browser support.

[tridip1931]

Oh ya. I will delete those widths. Also will figure out the flex-grow/shrink if I come across.
Do we use flex-grow anywhere in our code right now?

[bhousel]

Do we use flex-grow anywhere in our code right now?

It's part of the shorthand flex: property. The keyboard shortcuts screen is probably the place I've most recently used it:

iD/css/80_app.css

Lines 3419 to 3432 in d9b3b7b

	.modal-shortcuts .shortcut-tab {
	display: flex;
	flex-flow: row wrap;
	}
	.modal-shortcuts .shortcut-column {
	flex: 1 1 50%;
	width: 50%;
	}
	.modal-shortcuts .shortcut-tab-tools .shortcut-column {
	flex: 1 1 100%;
	width: 100%;
	}

(also an example of a place where you need to set a width, so flex can start out knowing what it's supposed to do before growing and shrinking)

[tridip1931]

Thanks @bhousel . Thats very helpful. 👍

[bhousel]

closing as stale