Go to the General Flex Styles section.

Within this section, youll create a flexible display layout that varies in response to changing screen widths. Note that when you use the different flex styles be sure you include the latest WebKit browser extension followed by the W3C specification.

In the General Flex Styles section create a style rule for the page body that displays the body as a flexbox oriented as a row, wrapping content to a new line as needed.

Section Elements

The page content is divided into two section elements with IDs of #left and #right. The left section does not need as much of the screen width. Create a style rule for the left section that sets its growth and shrink rates to 1 and 8 respectively and sets its basis size to 130 pixels.

The right section requires more screen width. Create a style rule for the right section that sets its growth and shrink values to 8 and 1 and sets its basis size to 351 pixels.

Next, youll create a flexbox for the sectionelement with class of .tips that contains an article and a biographical aside, which will be displayed either in two columns or in a single column depending on the screen width. Add a style rule that displays the class of tips section elements as flexboxes in the row direction with wrapping.

Article Elements

The articles within each tips section need to occupy more of the screen width. Create a style rule for articleelements that lays them out as flex items with a growth value of 2, shrink value of 1, and a basis size of 351 pixels.

Aside Elements

The biographical asides within each tips section need to occupy less screen space. Create a style rule for asideelements that lays them out as flex items with a growth value of 1, shrink value of 2, and a basis size of 250 pixels.

Navigation List

Finally, the horizontal navigation list at the top of the page will also be treated as a flexbox. Create a style rule for the ul element within the horizontal navigation list displaying it as a flexbox in column orientation with wrapping. You do not have to define the sizes of the flex items because the width and height are set in the tf_designs.css style sheet.