<!DOCTYPE html> <html><head><title>flexbox | flex-basis: percentage, flex-shrink: +integer</title> <link href="http://opera.com" rel="author" title="Opera Software"> <link href="http://www.w3.org/TR/css-flexbox-1/#flex-basis-property" rel="help"> <link href="reference/flexbox_flex-basis-shrink-ref.htm" rel="match"> <style> div { background: blue; margin: 1em 0; border: 1px solid black; height: 8em; width: 24em; display: flex; } span { background: white; margin: 1em 0; width: 5em; display: inline-block; flex: 1 1 50%; } span:nth-child(1) {background: yellow;} span:nth-child(2) {background: pink;} span:nth-child(3) {background: lightblue;} span:nth-child(4) {background: grey;} </style> </head><body><div> <span>one</span> <span>two</span> <span>three</span> <span>four</span> </div> </body></html>