CHS Web Design Track

Tutorial 5 Designing for the Mobile Web

«Previous Lesson | Next Lesson »

Session 5.2 Introducing Flexible Boxes

Defining a Flexible Box

  • A flexible box or flexbox is a box containing items whose sizes can shrink or grow to match the boundaries of the box
  • Items within a flexbox are laid out along a main axis
  • The main axis can point in either the horizontal or vertical direction
  • Cross axis is perpendicular to the main axis and is used to define the height or width of each item
  • To define an element as a flexbox, apply either of the following display styles:
    display: flex;
    or
    display: inline-flex;
    where a value of flex starts the flexbox on a new line and a value of inline-flex keeps the flexbox in-line with its surrounding content

Class Discussion:

Research the latest WebKit browser extension and the current W3C specifications.

Cross-Browser Flexboxes

Setting the Flexbox Flow

  • Flex items can wrap to a new line using the following property:
    flex-wrap: type;
    where type is either:
    • nowrap (the default)
    • wrap to wrap the flex items to a new line
  • wrap-reverse to wrap flex items to a new line starting in the opposite direction from the current line
To open the pre-k page and style sheet:
  1. Use your editor to open the tf_prek_txt.html and tf_flex_txt.css files from the html05 › tutorial folder. Enter your name and the date in the comment section of each file and save them as tf_prek.html and tf_flex.css respectively.
  2. Return to the tf_prek.html file in your editor and, within the document head, create links to the tf_reset.css, tf_styles2.css, and tf_flex.css style sheets in that order.
  3. Take some time to scroll through the contents of the document to become familiar with its contents and structure and then save your changes to the file, leaving it open.
  4. Go to the tf_flex.css file in your editor.
  5. Go to the Base Flex Styles section and insert the following style rules to display the entire page body as a flexbox oriented horizontally with overflow flex items wrapped to a new row as needed:
    body {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
}
  6. Save your changes to the file.
Figure 5-28 highlights the new flexbox styles in the style sheet.

Setting the Flex Basis

Defining the Flex Growth

  • The rate at which a flex item grows from its basis size is determined by the flex-grow property 
    flex-grow: value;
    where value is a non-negative value that expresses the growth of the flex item relative to the growth of the other items in the flexbox
  • The default flex-grow value is 0, which is equivalent to the flex item remaining at its basis size
  • The following style rule creates a layout for navigation list in which each list item is assigned an equal size and grows at the same rate
    nav ul {
    display: flex;
}
nav ul li {
    flex-basis: 0px;
    flex-grow: 1;
}

Defining the Shrink Rate

  • The rate at which flexboxes shrink below their basis size is given by the following property:
    flex-shrink: value;
    where value is a non-negative value that expresses the shrink rate of the flex item relative to the shrinkage of the other items in the flexbox
  • The default flex-shrink value is 1
  • If the flex-shrink value is set to 0, then the flex item will not shrink below its basis value

The Flex Property

Applying a Flexbox Layout

To define the flex layout:
  1. Within the tf_flex.css file in your editor, add the following style rules to the Base Flex Styles section:
    header, footer {
    width: 100%;
}
aside {
    -webkit-flex: 1 1 120px;
    flex: 1 1 120px;
}
section#main {
    -webkit-flex: 3 1 361px;
    flex: 3 1 361px;
}
  2. Save your changes to the file and then open the tf_prek.html file in your web browser.
  3. Change the size of the browser window or use the device emulator tools in your browser to view the page under different screen widths. As shown in Figure 5-33, the layout of the page changes as the screen narrows and widens.
Figure 5-32 highlights the newly added style rules to define the flex item sizes.
Figure 5-33
 
To lay out the topic articles and navigation list:
  1. Return to the tf_flex.css file in your editor and go to the Base Flex Styles section.
  2. Add the following style rules to create a flex layout for the page articles.
    section#topics {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
}
    section#topics article {
    -webkit-flex: 1 1 200px;
    flex: 1 1 200px;
}
  3. Scroll down to the media query for tablet and desktop devices and add the following style rule to create a flex layout for the navigation list. (Indent your code to set it off from the media query braces.)
    nav.horizontal ul {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
}
    nav.horizontal li {
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
}
  4. Save your changes to the file and reload the tf_prek.html file in your web browser.
  5. View the page under different screen widths and verify that, for tablet and desktop screen widths, the navigation list entries appear in a single row. Also, verify that the articles in the topics section flex from a single column layout to two or more rows of content. See Figure 5-36.
Figure 5-34 highlights the style rules for the article topics layout.
Figure 5-35 highlights the style rules for the navigation list and list items.
Figure 5-36 Flex layout under a desktop screen width
 

Quick Quiz:

  1. True/False: The relative proportions of the items under a flex layout always need to be constant.
  2. True/False: Flexboxes cannot be nested within one another.
 

Class Discussion:

Compare the align-items and align-content properties. Ask them to list out the major differences between them.

Reordering Page Content with Flexboxes

To lay out the topic articles and navigation list:
  1. Return to the tf_flex.css file in your editor and go to the Mobile Devices media query.
  2. Add the following style rules, indented to offset them from the braces in the media query:
    aside {
    -webkit-order: 99;
    order: 99;
}
footer {
    -webkit-order: 100;
    order: 100;
}
    Note that the other flex items will have a default order value of 0 and thus will be displayed in document order before the aside and footer elements.
  3. Save your changes to the file and then reload the tf_prek.html file in your web browser.
  4. Reduce the width of the browser window below 480 pixels to show the mobile layout. Verify that the class schedule now appears at the bottom of the file directly before the body footer.
Figure 5-37 highlights the style rules to set the order of the aside and footer elements.
 

Quick Quiz:

  1. True/ False: Order values can be negative.
  2. What is the default order value?

Aligning Items along the Main Axis

Aligning Flex Lines

Aligning Items along the Cross Axis

Creating a Navicon Menu

To insert the navicon image:
  1. Return to the tf_prek.html file in your editor.
  2. Directly after the opening <nav> tag in the body header, insert the following hypertext link and inline image.
    <a id=”navicon” href=”#”>
<img src=”tf_navicon.png” alt=”” />
</a>
Figure 5-41 highlights the code to create the navicon.
 
To add styles for the navicon image:
  1. Within the document head of the tf_prek.html file, add a link to the tf_navicon.css style sheet file after the link for the vtf_flex.css file. Save your changes to the file.
  2. Use your editor to open the tf_navicon_txt.css files from the html05 › tutorial folder. Enter your name and the date in the comment section of the file and save it as tf_navicon.css.
  3. By default, the navicon will be hidden from the user. Go to the Base Styles section and add the following style rule:
    a#navicon {
    display: none;
}
  4. The navicon will be displayed only for mobile devices. Go to the media query for mobile devices and add the following style rule to display the navicon.
    a#navicon {
    display: block;
}
  5. When the navicon is displayed, you want the contents of the navigation list to be hidden. Add the following style rule within the mobile device media query:
    nav.horizontal ul {
    display: none;
}
  6. Finally, add the following style rule to the mobile device query that displays the contents of the navigation list when the user hovers over the navicon or the contents of the navigation list.
    a#navicon:hover+ul, nav.horizontal ul:hover {
    display: block;
}
  7. Save your changes to the file and then reload the tf_prek.html file in your browser or mobile devices. Resize the viewport as needed to display the mobile layout.
  8. Verify that as you hover over or touch the navicon, the navigation list appears, as shown in Figure 5-43.
  9. Verify that hovering over or touching other parts of the page hides the navigation list.
Figure 5-42 highlights the style rules for the navicon hypertext link.
Figure 5-43 Action of the navicon for mobile devices
 

Class Discussion:

Relate similar examples of symbols which they have seen in websites.

 

Class discussion:

Discuss the advantages of minifying.

 
Session 5.2 Quick Check
  1. Provide code to display the body header as a flexbox. Include the browser extension for WebKit.
  2. Provide a style to display flexbox items in a single line, oriented vertically starting from the bottom and moving up.
  3. Provide a style that sets the initial size of a flex item to 250 pixels.
  4. Provide a style that sets the growth rate of the flex item to 4.
  5. What two things can happen when a flex item drops below its basis size?
  6. Provide a style rule that sets the flex size of all section elements that are direct children of the page body be equal regardless of the size of the flexbox.
  7. What property should be applied to reorder the placement of a flex item?
  8. Provide a style to center the flex items along the flexbox's main axis.
  9. Provide a style to center the flex items along the flexbox's cross axis.
«Previous Lesson | Next Lesson »