Flexbox in CSS
Published on 25. May 2017
154 pages
978-1-4919-8145-0 (ISBN)
Description
Layout designers rejoice: CSS finally has an update that will make your lives easier. Flexible box layout, often called Flexbox, frees you from the challenges of creating layouts with floats and padding? and lets you specify containers and their contents instead. The new model means you can specify the directions in which material flows, how content wraps, and the ways components can expand to fill a space. Whether you've been creating large sites or small, fixed sites or responsive sites, flexbox will simplify your work.
More details
Language
English
Place of publication
Sebastopol
United States
Product notice
Windows
File size
14,56 MB
ISBN-13
978-1-4919-8145-0 (9781491981450)
Copyright in bibliographic data and cover images is held by Nielsen Book Services Limited or by the publishers or by their respective licensors: all rights reserved.
Schweitzer Classification
Content
- Cover
- Copyright
- Table of Contents
- Preface
- Conventions Used in This Book
- Using Code Examples
- O'Reilly Safari
- How to Contact Us
- Chapter 1. Flexbox
- The Problem Addressed
- Simple Solutions
- Learning Flexbox
- The display Property
- Chapter 2. Flex Container
- Flex Container Properties
- The flex-flow Shorthand Property
- The flex-direction Property
- The flex-wrap Property
- Flex Line Cross Dimension
- Flex Container
- The justify-content Property
- justify-content Examples
- The align-items Property
- align-items: stretch
- align-items: flex-start
- align-items: flex-end
- align-items: center
- align-items: baseline
- Additional Notes
- The align-content Property
- Chapter 3. Flex Items
- What Are Flex Items?
- Flex Item Features
- min-width
- Flex Item-Specific Properties
- The flex Property
- The flex-grow Property
- Non-Null Growth Factor
- Growing Proportionally Based on Growth Factor
- Growth Factor with Different Widths
- Growth Factors and the flex Property
- The flex-shrink Property
- Proportional Based on Width and Shrink Factor
- In the Real World
- Differing Bases
- The flex-basis Property
- content
- auto
- Default Values
- Length Units
- Zero Basis
- The flex Shorthand Property
- Common flex Values
- Custom flex Values
- Sticky Footer with flex
- The align-self Property
- The order property
- Tabbed Navigation Revisited
- Chapter 4. Flexbox Examples
- Responsive Two-Column Layout
- Wider Screen Layout
- Power Grid Home Page
- Sections
- Vertical Centering
- Inline Flex Example
- Calendar
- Magic Grid
- Performance
- Good to Go
- About the Author
