| <svg xmlns="http://www.w3.org/2000/svg" width='504' height='270' viewBox="0 0 504 270"> |
| <defs> |
| <pattern id='checker' width='20' height='20' patternUnits='userSpaceOnUse'> |
| <rect x='0' y='0' width='10' height='10' fill='#eee' /> |
| <rect x='10' y='10' width='10' height='10' fill='#eee' /> |
| <rect x='0' y='10' width='10' height='10' fill='#ccc' /> |
| <rect x='10' y='0' width='10' height='10' fill='#ccc' /> |
| </pattern> |
| </defs> |
| <style> |
| text { font-family: sans-serif; font-weight: bold; font-size: 30px; text-anchor: middle; } |
| rect { stroke-width: 2px; stroke: #888; } |
| g > rect:nth-child(1) { fill: #888 } |
| g > rect:nth-child(2) { fill: #fcc; } |
| g > rect:nth-child(3) { fill: #cfc; } |
| g > rect:nth-child(4) { fill: #ccf; } |
| g > rect:nth-child(5) { fill: transparent; } |
| </style> |
| <g transform="translate(2,2)"> |
| <rect x='0' y='0' width='500' height='50' /> |
| <rect x='0' y='0' width='100' height='50' /> |
| <rect x='100' y='0' width='80' height='50' /> |
| <rect x='180' y='0' width='200' height='50' /> |
| <rect x='0' y='0' width='500' height='50' /> |
| <text x='250' y='38'>flex-start</text> |
| </g> |
| <g transform="translate(2,56)"> |
| <rect x='0' y='0' width='500' height='50' /> |
| <rect x='120' y='0' width='100' height='50' /> |
| <rect x='220' y='0' width='80' height='50' /> |
| <rect x='300' y='0' width='200' height='50' /> |
| <rect x='0' y='0' width='500' height='50' /> |
| <text x='250' y='38'>flex-end</text> |
| </g> |
| <g transform="translate(2,110)"> |
| <rect x='0' y='0' width='500' height='50' /> |
| <rect x='60' y='0' width='100' height='50' /> |
| <rect x='160' y='0' width='80' height='50' /> |
| <rect x='240' y='0' width='200' height='50' /> |
| <rect x='0' y='0' width='500' height='50' /> |
| <text x='250' y='38'>center</text> |
| </g> |
| <g transform="translate(2,164)"> |
| <rect x='0' y='0' width='500' height='50' /> |
| <rect x='0' y='0' width='100' height='50' /> |
| <rect x='160' y='0' width='80' height='50' /> |
| <rect x='300' y='0' width='200' height='50' /> |
| <rect x='0' y='0' width='500' height='50' /> |
| <text x='250' y='38'>space-between</text> |
| </g> |
| <g transform="translate(2,218)"> |
| <rect x='0' y='0' width='500' height='50' /> |
| <rect x='20' y='0' width='100' height='50' /> |
| <rect x='160' y='0' width='80' height='50' /> |
| <rect x='280' y='0' width='200' height='50' /> |
| <rect x='0' y='0' width='500' height='50' /> |
| <text x='250' y='38'>space-around</text> |
| </g> |
| </svg> |