Today I wanted a form with a label on the left, a button on the right, and an input in the middle, with the input getting all the space. Here is a spell:
.fill-container {
display: flex;
justify-content: space-between;
align-items: center;
}
.get-bigger-in-the-middle {
flex-grow: 2;
margin-left: 10px;
margin-right: 10px;
}
.stay-to-the-left {
text-align: left;
flex: 0;
}
.stay-to-the-right {
flex: 0;
}
Then in HTML, the parent container is the flex box, and the immediate children are the three items. (They have to be immediate children.)
<div class="fill-container">
<label class="stay-to-the-left"
for="email">Email*</label>
<input class="get-bigger-in-the-middle"
type="email"
name="email" />
<input class="stay-to-the-right"
type="submit"
value="Subscribe" />
</div>
Before, I could get it lined up on the right, but not the left.

After, the center input is as wide as it can be:

See also: CSS Tricks on Flexbox
And thanks to Alyson van Hardenberg for the pointers.