For most of the history of the web, websites and pages were fixed static layouts with sizes based on the most common monitor sizes of the day. Many of the techniques we used for page layout were really hacks even if they worked well. There simply wasn’t any specifications dedicated to page layout we could follow.That’s been changing in recent years and now developers have a number of tools to help create flexible and responsive websites that work across any number of devices.
One of the more prominent tools and among the very first to be ready for live site is flexbox, the flexible box layout module to be accurate, and it works best to layout components like navigation bars and forms in your design. Any time you need to layout items in a single dimension (row or column) you should think flexbox.
Flexbox containers grow and shrink and flex items inside a container can rearrange themselves according to available space. It’s also easy to align the items any way you want with a line of code or two.
If you’ve ever wondered why you can’t write code like vertical-align: center; and have it center elements vertically, flexbox is for you. Different code, but just as simple.
What’s Inside?
- Chapter 1: Introduction
- Some general information and history about flexbox including when you should use flexbox and when you should use CSS grids instead.
- Chapter 2: The Flexible Box Layout Module
- A walk through of the basics of the flexible box layout module. This chapter covers the terminology and then talks about flex containers and flex items and how to create them.
- Chapter 3: Order and Orientation
- How to use the flex-direction, flex-lines, flex-flow, and display order properties as well as information about nesting flex containers and flex items.
- Chapter 4: Flexibility
- How to use the flex-grow and flex-shrink properties. This chapter also talks about the difference between absolute and relative flex and offers some common flex values that you’re likely to use.
- Chapter 5: Alignment
- This chapter begins with auto-margins and then moves into discussing main axis and cross axis alignment. It also talks about aligning flex-lines as opposed to flex-items.
- Chapter 6: Examples
- I end the book with a few examples on centering, forms, card layout, and navigation. I wouldn’t necessarily use the code here “as is” for real projects (though you probably could in some cases). Each of the examples was chosen to show at least one flexbox feature and reinforce the theory part of the book.
You can download a copy of Flexbox: A Beginner’s Guide to the CSS Flexible Box Layout Module
