Long description

The flex container is a rectangular block. Two boxes and a rectangular box are placed side-by-side inside the container. The first box is labeled flex item 1. The second box is a rectangular box labeled flex item 2. The third box is labeled flex item 3. The boxes are placed equidistant from each other. The space at the left side of the first box and the top of the three boxes is lesser than the space at the right side of the third box and the bottom of the three boxes. An arrow labeled main axis points from the left of the flex container to the right. An arrow labeled cross axis points from the top of the flex container to the bottom. The width of the flex container is labeled main axis and the height of the flex container is labeled cross axis.

The corresponding block of code reads as follows. Line 1: open angle bracket div class equals open double quotes container close double quotes close angle bracket at indentation level 0. Line 2: open angle bracket div close angle bracket flex item 1 open angle bracket forward slash div close angle bracket at indentation level 1. Line 3: open angle bracket span close angle bracket flex item 2 open angle bracket forward slash span close angle bracket at indentation level 0. Line 4: open angle bracket div close angle bracket flex item 3 open angle bracket forward slash div close angle bracket at indentation level 0. Line 5: open angle bracket forward slash div close angle bracket at indentation level 0.

Note: Both block-level and inline elements will become flex items.