amp-img with layout responsive doesn't work in flexbox

Repros in Chrome here: https://codepen.io/cathyxz/pen/wZgQqY?editors=1100

Basically today @kristoferbaxter discovered that when you have:
```
#container {
display: flex;
height: 100vh;
width: 100vw;
align-items: center;
justify-content: center;
}
```
and
```

in AMP, the `` does not display. =(

It turns out that the dimensions of both the `` and the `sizer` are 0x0, and therefore the `` tag is not rendered because the `layoutCallback` is not called.

This does work with `layout="intrinsic"` though, and `layout="responsive"` will work correctly as intended if we set the `flex-basis` property on the ``. But not out of the box. Since this is a commonly used pattern for centering images, it seems like we should document this behaviour and workarounds at least.

Start with the linked CodePen reproduction and the amp-img layout behavior described in the issue, including layoutCallback, responsive versus intrinsic layouts, and flex-basis. Done means documenting the flexbox limitation and the intrinsic and flex-basis workarounds for responsive amp-img images.

Written by the indexing model from the issue text.