CSS Flexible box layout module - part 2 - Basics

In the beginning...

In the beginning we would like to know some vocabulary:
Flex container – DOM element which contains flex items. It defines available spaces for its children.

To create a flex container use display property with “flex” or “inline-flex” value;

section {
  display: -webkit-box; /* OLD: Safari, iOS, Android browser, older WebKit browsers. */
  display: -moz-box; /* OLD: Firefox (buggy) */
  display: -ms-flexbox; /* MID: IE 10 */
  display: -webkit-flex; /* NEW, Chrome 21+ */
  display: flex; /* NEW: Opera 12.1, Firefox 22+ */
}

Because it is still Candidate Recommendation, browsers implement it as an experiment, so we need to use prefixes. There are 3 syntaxes – new (standard), old and mid (legacy syntax). In the end of this article I've added some links explain syntax for some of properties. In this article I use standard syntax without prefixes.

flex item – child element of flex container
main axis – axis defined by flex-direction property in flex container, by default it is X-axis (row/row-reverse value)
cross-axis – perpendicular to the main axis.