Table of Contents for
Responsive Web Design with HTML5 and CSS3 Essentials

Version ebook / Retour

Cover image for bash Cookbook, 2nd Edition Responsive Web Design with HTML5 and CSS3 Essentials by Asoj Talesra Published by Packt Publishing, 2016
  1. Cover
  2. Table of Contents
  3. Responsive Web Design with HTML5 and CSS3 Essentials
  4. Responsive Web Design with HTML5 and CSS3 Essentials
  5. Credits
  6. About the Authors
  7. About the Reviewer
  8. www.PacktPub.com
  9. Preface
  10. What you need for this book
  11. Who this book is for
  12. Conventions
  13. Reader feedback
  14. Customer support
  15. 1. Introducing Responsive Web Design
  16. Exploring how RWD works
  17. Understanding the elements of RWD
  18. Appreciating the importance of RWD
  19. Comparing RWD to adaptive design
  20. Preparing our development environment
  21. Considering a suitable strategy
  22. Exploring best practices
  23. Setting up a development workflow
  24. Exploring mistakes
  25. Summary
  26. 2. Creating Fluid Layouts
  27. Understanding the different layout types
  28. Setting the available viewport for use
  29. Exploring the benefits of flexible grid layouts
  30. Understanding the mechanics of grid layouts
  31. Implementing a prebuilt grid layout
  32. Exploring the use of flexbox
  33. Visiting the future
  34. Taking it further
  35. Summary
  36. 3. Adding Responsive Media
  37. Making video responsive
  38. Making text fit on screen
  39. Summary
  40. 4. Exploring Media Queries
  41. Understanding media queries
  42. Identifying common breakpoints
  43. Putting our theory into practice
  44. Creating some practical examples
  45. Examining some common mistakes
  46. Exploring best practices
  47. Taking things further
  48. Summary
  49. 5. Testing and Optimizing for Performance
  50. Understanding why pages load slowly
  51. Optimizing the performance
  52. Testing the performance of our site
  53. Best practices
  54. Providing support for older browsers
  55. Considering cross-browser compatibility
  56. Testing site compatibility
  57. Following best practices
  58. Summary

Exploring the use of flexbox

So, what is flexbox?

It's a module that has been designed to provide a more efficient way to layout and distribute space around items in a container, particularly if their sizes are not yet known. We can set a number of properties to ensure that each item best uses the available space around it, even if its size changes.

At the time of writing, this is a W3C Candidate Recommendation; this means that it is effectively on the last call before becoming a browser standard in late 2016. This should be something of a formality though, as most browsers already support it as a standard:

Exploring the use of flexbox

Source: http://caniuse.com/#search=flexbox

To fully understand how it all works is outside the scope of this book, but to help get started, we can run a quick demo, and explore some of the main features:

  1. From the code download that accompanies this book, go ahead and extract copies of flexbox.html and flexbox.css; store the HTML markup at the root of our project area, and the CSS style sheet in the css subfolder of our project area.
  2. Try previewing flexbox.html in a browser. For this, we will need to enable the browser's responsive mode (or device mode, depending on browser); if all is well, we should see something akin to this screenshot:

Exploring the use of flexbox

The demo is based on a pen created by Irina Kramer, which is available at https://codepen.io/irinakramer/pen/jcLlp; for the purposes of our demo, we focus on the example layout taken from that pen.

At first glance, this demo looks very straightforward. It could certainly use some help in the color department, but that's not what is of interest to us at the moment. If we dig deeper into the code, we can see that flexbox has been incorporated in various places; let's explore its use in more detail.

Taking a closer look

Taking a closer look at our code, we will find that a large part of it uses standard attributes, which we might find on any site. The code that is of interest to us starts on line 50; to understand its role, we first need to get our heads around the basic concept of flex layouts:

Taking a closer look

Source: W3C

In a nutshell, items are laid out following either the main axis (from main-start to main-end) or the cross axis (from cross-start to cross-end):

Property

Purpose

main axis

The primary axis along which flex items are laid out; this is dependent on the flex-direction property.

main-start |  main-end

The start and end points of flex items that are placed within the container (horizontally).

main size

A flex item's width or height, whichever is in the main dimension, is the item's main size. The main size property can be the item's height or width size.

cross axis

The axis perpendicular to the main axis. Its direction depends on the main axis direction.

cross-start | cross-end

Start and end points for flex lines that are filled with items and placed into the container (vertically).

cross size

This is the width or height of a flex item, whichever is in the cross dimension.

With this in mind, let's explore some of the flexbox terms that have been used in our code; the initial few styles are standard rules that could apply to any site. The code of interest to us starts on line 29.

If we scroll down to that line, we are met with this:

Taking a closer look

Our first attribute, display: flex, defines the container which contains the flex items; here, we're setting it to show items in rows, and to wrap from left to right. If we had a number of columns in our layout, and by this I mean more than just two or three, then we might use align-items and justify-content to ensure that each column was evenly spread throughout the row, irrespective of the width of each column.

With the .grid defined, we need to style our grid-cells, or the containers where we host our content. There are several properties we can apply; the one we've used is flex, which is shorthand for flex-grow, flex-shrink, and flex-basis. In our case, it is recommended that the shorthand version be used, as this will set the other values automatically; we've set flex-grow to 1, which indicates how much it should grow, in relation to other flexible items in the same container.

The next property of interest is in the .nav rule. Here, we've used flex-flow again, but this time we also justify-content; the latter controls how items are packed on each row (in this case, toward the end of the line):

Taking a closer look

Our last block of code of particular interest is this section, within the large screen media query:

Taking a closer look

The order property simply specifies the order of each item in our flex container; in this case, we have .aside-1 and .aside-2 in position 1 and 2 respectively (not in shot), with the .main in the middle at position 2.

Note

There are a lot more properties we can set, depending on our requirements. Take a look at the source code on the original pen. There are plenty of reference sources about flexbox available online—as a start, have a look at Chris Coyier's guide, available at http://bit.ly/1xEYMhF.

Let's move on. We've explored some examples of what is possible now, but there is at least one downside with using flexbox. The technology works very well, but can add a fair amount of code and complexity when implementing in a site.

It's time to look for something simpler to use, which doesn't require quite the same effort to implement; enter CSS grid templates! This is still an early technology, with minimal browser support, but is already easier to implement. Let's dive in and take a look in more detail.