Flexbox for Responsive Web Design

Flexbox for Responsive Web Design: How to build websites that work on any browser and any device

Responsive web design is all about creating flexible websites that work equally well on phones, tablets, computers, and other devices. The key word here is “flexible”.

The CSS flexible box model, known as flexbox, is a new layout tool that can help you build flexible websites painlessly. It is powerful, easy to learn, and easy to use.

About This Book

Flexbox for Responsive Web Design is a practical guide that explains the principles, benefits, and challenges of responsive web design with flexbox. It has four parts:

• A clear, compact tutorial covering the language of flexbox – core concepts, terminology, and syntax.
• Effective strategies for dealing with older browsers that don’t support flexbox.
• A user-friendly introduction to responsive web design – theory and practice in “aw shucks” language.
• Step-by-step instruction for building responsive web pages with flexbox.

Topics are explained in clear, easy-to-understand language. Key points are reinforced with real-world examples. And code is provided so you can see exactly how everything works.

By the end of the book, you will have a customizable template for a fully-responsive web page powered by flexbox – a tangible product that you can use for your own projects.

Who This Book Is For

This book is for web designers who want to build responsive websites that work on any browser and any device. The only requirement is a basic understanding of HTML and CSS.

Source Code

All of the source code used in this book can be downloaded at http://flexbox-rwd.com/download.aspx.

Why This Book?

There is nothing hard about building responsive websites with flexbox. But there are a few moving parts. This book focuses on the most important parts, so you can quickly acquire the skills you need to design responsive websites that work reliably on all browsers and all devices.

Table of Contents

Part 1. Flexbox Tutorial
Chapter 1. Introduction to Flexbox
Chapter 2. Flexbox Terminology
Chapter 3. Flex Containers
Chapter 4. Item Flow and Order
Chapter 5. Item Alignment
Chapter 6 Item Flexibility

Part 2. Browser Support Strategies
Chapter7. Vendor Prefixes
Chapter 8. Progressive Enhancement

Part 3. Responsive Web Design
Chapter 9. Media Queries
Chapter 10. Responsive Text
Chapter 11. Responsive Images
Chapter 12. Setting the Viewport

Part 4 Responsive Web Pages
Chapter 13. Responsive Navigation
Chapter 14. Responsive Footer
Chapter 15. Responsive Layout
Chapter 16. Responsive Web Page