Long description

The figure is divided into blocks. The first block is divided into two vertical sections. The first section consists of a page and a block of code and the second section consists of a block of code and a paragraph.

Section 1: A rectangular page that consists of an image at the left and a level-1 heading with three paragraphs at the right are shown. The level-1 heading reads, Fall In Calgary and is placed at right of the image. The paragraphs and the heading are aligned to the left. An arrow labeled float that points to the left is placed between the top of the block and the rectangular page. An arrow labeled margin-left equals image size plus margin-right points to the right at the space below the image and to the left of the paragraphs. This indicates that the level-1 heading and the paragraphs have an indentation level 0 from the image on the left.

The first block of code placed below the page reads as follows. Line 1: dot media hyphen image open curly brace at indentation level 0. Line 2: float colon left semicolon at indentation level 1. Line 3: margin hyphen right colon 10 p x semicolon at indentation level 1. Line 4: close curly brace at indentation level 0. Line 5: dot media hyphen body open curly brace at indentation level 0. Line 6: margin hyphen left colon 160 p x semicolon at indentation level 1. Line 7: close curly brace at indentation level 0.

Section 2: The second block of code is placed at the right side of the page in section 1. The block of code reads as follows. Line 1: open angle bracket div class equals open double quotes media close double quotes close angle bracket at indentation level 0. Line 2: open angle bracket i m g class equals open double quotes media hyphen image close double quotes s r c equals open double quotes c dot j p g close double quotes close angle bracket at indentation level 1. Line 3: open angle bracket div class equals open double quotes media hyphen body close double quotes close angle bracket at indentation level 1. Line 4: open angle bracket h 2 close angle bracket Fall in Calgary open angle bracket forward slash h 2 close angle bracket at indentation level 2. Line 5: open angle bracket p close angle bracket Nunc nec fermentum dolor ellipsis open angle bracket forward slash p close angle bracket at indentation level 2. Line 6: open angle bracket p close angle bracket Mauris porta arcu i d ellipsis open angle bracket forward slash p close angle bracket at indentation level 2. Line 7: open angle bracket p close angle bracket Phasellus vel felis purus ellipsis open angle bracket forward slash p close angle bracket at indentation level 2. Line 8: open angle bracket forward slash div close angle bracket at indentation level 1. Line 9: open angle bracket forward slash div close angle bracket at indentation level 0.

A paragraph is placed below the second block of code and reads as follows. Prior to flexbox, one would create such a layout within a container using floats plus margins. The problem with this approach is that margins needed to be in pixels and had to exactly match image size. If image size changed (or you wanted same kind of style elsewhere), you had to modify the style.

The second block is placed below the first block and is divided into two vertical sections.

Section 1: A rectangular page that consists of an image at the left and a level-1 heading with three paragraphs at the right are shown. The level-1 heading reads, Fall In Calgary and is placed at right of the image. The paragraphs and the heading are aligned to the left with an indentation level 0 from the image.

Section 2: The third block of code placed at the right of the page reads as follows. Line 1: dot media open curly brace at indentation level 0. Line 2: display colon flex semicolon at indentation level 1. Line 3: align hyphen items colon flex hyphen start semicolon at indentation level 1. Line 4: close curly brace at indentation level 0. Line 5: dot media hyphen image open curly brace at indentation level 0. Line 6: margin hyphen right colon 1 e m semicolon at indentation level 1. Line 7: close curly brace at indentation level 0.

Note: Using flexbox, we now have a much more generalized (and thus reusable) style.