Flexbox in CSS Understanding CSS Flexible Box Layout Estelle Weyl BBeeiijjiinngg BBoossttoonn FFaarrnnhhaamm SSeebbaassttooppooll TTookkyyoo Flexbox in CSS by Estelle Weyl Copyright © 2017 Estelle Weyl. All rights reserved. Printed in the United States of America. Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472. O’Reilly books may be purchased for educational, business, or sales promotional use. Online editions are also available for most titles (http://oreilly.com/safari). For more information, contact our corporate/insti‐ tutional sales department: 800-998-9938 or [email protected]. Editor: Meg Foley Interior Designer: David Futato Production Editor: Colleen Lobner Cover Designer: Randy Comer Copyeditor: Amanda Kersey Illustrator: Rebecca Demarest June 2017: First Edition Revision History for the First Edition 2017-05-23: First Release The O’Reilly logo is a registered trademark of O’Reilly Media, Inc. Flexbox in CSS, the cover image of salmon, and related trade dress are trademarks of O’Reilly Media, Inc. While the publisher and the author have used good faith efforts to ensure that the information and instructions contained in this work are accurate, the publisher and the author disclaim all responsibility for errors or omissions, including without limitation responsibility for damages resulting from the use of or reliance on this work. Use of the information and instructions contained in this work is at your own risk. If any code samples or other technology this work contains or describes is subject to open source licenses or the intellectual property rights of others, it is your responsibility to ensure that your use thereof complies with such licenses and/or rights. 978-1-491-98142-9 [LSI] Table of Contents Preface. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . v 1. Flexbox. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 The Problem Addressed 1 Simple Solutions 6 Learning Flexbox 7 The display Property 8 2. Flex Container. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 Flex Container Properties 13 The flex-flow Shorthand Property 14 The flex-direction Property 15 The flex-wrap Property 23 Flex Line Cross Dimension 34 Flex Container 35 The justify-content Property 36 justify-content Examples 44 The align-items Property 45 align-items: stretch 48 align-items: flex-start 50 align-items: flex-end 50 align-items: center 51 align-items: baseline 52 Additional Notes 53 The align-content Property 54 3. Flex Items. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65 What Are Flex Items? 65 iii Flex Item Features 66 min-width 68 Flex Item–Specific Properties 69 The flex Property 70 The flex-grow Property 71 Non-Null Growth Factor 73 Growing Proportionally Based on Growth Factor 73 Growth Factor with Different Widths 74 Growth Factors and the flex Property 75 The flex-shrink Property 79 Proportional Based on Width and Shrink Factor 82 In the Real World 83 Differing Bases 85 The flex-basis Property 87 content 88 auto 90 Default Values 91 Length Units 92 Zero Basis 97 The flex Shorthand Property 98 Common flex Values 98 Custom flex Values 104 Sticky Footer with flex 108 The align-self Property 110 The order property 111 Tabbed Navigation Revisited 114 4. Flexbox Examples. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117 Responsive Two-Column Layout 117 Wider Screen Layout 121 Power Grid Home Page 122 Sections 127 Vertical Centering 132 Inline Flex Example 132 Calendar 133 Magic Grid 138 Performance 142 Good to Go 142 iv | Table of Contents Preface Conventions Used in This Book The following typographical conventions are used in this book: Italic Indicates new terms, URLs, email addresses, filenames, and file extensions. Constant width Used for program listings, as well as within paragraphs to refer to program ele‐ ments such as variable or function names, databases, data types, environment variables, statements, and keywords. Constant width bold Shows commands or other text that should be typed literally by the user. Constant width italic Shows text that should be replaced with user-supplied values or by values deter‐ mined by context. This element signifies a general note, tip, or suggestion. Using Code Examples Whenever you come across an icon that looks like , it means there is an associated code example. Live examples are available at http://standardista.com/flexbox/flexfiles. You can either click the icon while reading this book to go directly to a live ver‐ sion of the code example referenced, or visit the link for a list of all of the code exam‐ ples found in these chapters. v This book is here to help you get your job done. In general, if example code is offered with this book, you may use it in your programs and documentation. You do not need to contact us for permission unless you’re reproducing a significant portion of the code. For example, writing a program that uses several chunks of code from this book does not require permission. Selling or distributing a CD-ROM of examples from O’Reilly books does require permission. Answering a question by citing this book and quoting example code does not require permission. Incorporating a signifi‐ cant amount of example code from this book into your product’s documentation does require permission. We appreciate, but do not require, attribution. An attribution usually includes the title, author, publisher, and ISBN. For example: “Flexible Boxes in CSS by Estelle Weyl (O’Reilly). Copyright 2017 Estelle Weyl, 978-1-491-98142-9.” If you feel your use of code examples falls outside fair use or the permission given above, feel free to contact us at [email protected]. O’Reilly Safari Safari (formerly Safari Books Online) is a membership-based training and reference platform for enterprise, government, educators, and individuals. Members have access to thousands of books, training videos, Learning Paths, interac‐ tive tutorials, and curated playlists from over 250 publishers, including O’Reilly Media, Harvard Business Review, Prentice Hall Professional, Addison-Wesley Profes‐ sional, Microsoft Press, Sams, Que, Peachpit Press, Adobe, Focal Press, Cisco Press, John Wiley & Sons, Syngress, Morgan Kaufmann, IBM Redbooks, Packt, Adobe Press, FT Press, Apress, Manning, New Riders, McGraw-Hill, Jones & Bartlett, and Course Technology, among others. For more information, please visit http://oreilly.com/safari. How to Contact Us Please address comments and questions concerning this book to the publisher: O’Reilly Media, Inc. 1005 Gravenstein Highway North Sebastopol, CA 95472 800-998-9938 (in the United States or Canada) vi | Preface 707-829-0515 (international or local) 707-829-0104 (fax) To comment or ask technical questions about this book, send email to bookques‐ [email protected]. For more information about our books, courses, conferences, and news, see our web‐ site at http://www.oreilly.com. Find us on Facebook: http://facebook.com/oreilly Follow us on Twitter: http://twitter.com/oreillymedia Watch us on YouTube: http://www.youtube.com/oreillymedia Preface | vii CHAPTER 1 Flexbox The CSS Flexible Box Module Level 1, or flexbox for short, makes the once-difficult task of laying out your page, widget, application, or gallery almost simple. With flex‐ box, layout is so simple you won’t need a CSS framework. Widgets, carousels, respon‐ sive features—whatever your designer dreams up—will be a cinch to code. And, while flexbox layout libraries have already popped up, instead of adding bloat to your markup, read this book, and learn how, with a few lines of CSS, you can create almost any responsive feature your site requires. The Problem Addressed By design, flexbox is direction-agnostic. This is different from block or inline layouts, which are defined to be vertically and horizontally biased, respectively. The web was originally designed for the creation of pages on monitors. Vertically-biased layout is insufficient for modern applications that change orientation, grow, and shrink depending on the user agent and the direction of the viewport, and change writing modes depending on the language. Layout on the web has been a challenge for many. For years we joked about the chal‐ lenges of vertical centering and multiple column layout. Some layouts were no laugh‐ ing matter, like ensuring equal heights in a grid of multiple side-by-side boxes, with buttons or “more” links fixed to the bottom of each box, with the button’s content neatly vertically centered, as shown in Figure 1-1, or ensuring boxes in a varied con‐ tent gallery were all the same height, while the top gallery row of boxes were neatly lined up with the boxes in subsequent rows, as shown in Figure 1-2. Flexbox makes all of these challenges fairly simple. 1 Figure 1-1. Power grid layout with flexbox, with buttons aligned on the bottom Figure 1-2. Gallery of variable content sections neatly lined up in columns using flexbox; the sections in each row are equal height 2 | Chapter 1: Flexbox Figure 1-3. Sticky header and footer on mobile using flexbox instead of position fixed Figure 1-4. Widget with many components neatly vertically centered Other than actually declaring a height, risking lots of whitespace or overflowing con‐ tent, there was no way to make all the columns equal in height. Multiple column lay‐ outs were created by floating every column, with each column being a predetermined width and differing heights dependent on the column’s content. While you can use faux background images with such a multiple column layout solution, or the table value of the display property, flexbox is a simple way—and the correct way—to make the columns equal in height. The Problem Addressed | 3