The first step in any flexbox layout is to create a flex container. To do that, set the property to . In Safari, you will still have to use the prefix.
Flex items are the children of a flex container. They are positioned along a main axis and a cross axis. The main axis is horizontal by default, so the items flow into a row. You can flip the main axis by setting to , it's set to by default.
How you move flex items to the top depends on the orientation of the main axis. If it's vertical, you set . If it's horizontal, you set .
Moving items to the left or right also depends on the orientation of the main axis. If is set to , then you set , otherwise if it's set to you set
Vertical and horizontal centering within a flexcontainer is trivial. Just set and/or to center. Again, it depends on the orientation of the main axis, so whether is set to or .
You can define how an individual flex item grows and shrinks relative to other flex items in the container. To do this set the property on each flex item you want to grow or shrink.
At the moment browser support for wrapping flex items is limited to webkit browsers and IE11. Firefox does not support wrapping yet. (Bad Firefox, BAD!)
The property gives you options for distributing the space around wrapped rows or columns. The options are and . To simply remove the space around wrapped columns, set to .
You can control the value for individual elements with . You can also use to move individual elements up or down or left or right. e.g. on a column layout you can move an individual flex item all the way to the left of the container by setting .