| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <title>'flow-start' and 'flow-end' match 'flex-start' and 'flex-end' with reversed flex directions</title> |
| <link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> |
| <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-justify-content"> |
| <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-direction-property"> |
| <link rel="match" href="flow-start-flow-end-reverse-ref.html"> |
| <style> |
| html, body { |
| color: black; background-color: white; font: 12.8px/1 monospace; padding: 0; margin: 0; |
| } |
| |
| .row { |
| font-size: 0; |
| } |
| |
| .container { |
| display: inline flex; |
| width: 80px; |
| height: 80px; |
| border: 1px solid black; |
| margin: 4px; |
| vertical-align: top; |
| } |
| |
| item { |
| display: block; |
| width: 20px; |
| height: 20px; |
| background: green; |
| } |
| |
| .row-reverse { |
| flex-direction: row-reverse; |
| } |
| |
| .column-reverse { |
| flex-direction: column-reverse; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="row"> |
| <div class="container row-reverse" style="justify-content: flow-start"><item></item></div> |
| <div class="container row-reverse" style="justify-content: flow-end"><item></item></div> |
| <div class="container column-reverse" style="justify-content: flow-start"><item></item></div> |
| <div class="container column-reverse" style="justify-content: flow-end"><item></item></div> |
| </div> |
| </body> |
| </html> |
