9781491930045
Flexible Boxes in CSS: Free Yourself with Flexbox
by: Estelle Weyl
ISBN-10: 1491930047
ISBN-13: 9781491930045
Edition 版次: 1
Publication Date 出版日期: 2016-12-25
Print Length 页数: 75
Layout designers rejoice: now you can greatly simplify the task of laying out your web page or application with Flexbox,the CSS Flexible Box Module. In this concise guide,author Estelle Weyl shows you how,with just few lines of code,you can easily create almost any responsive feature your site requires—whether it’s a widget,carousel,or anything else your designer dreams up. You’ll learn how to put your newfound knowledge of Flexbox into practice through several hands-on examples.
Short and deep,this book is an excerpt from the upcoming fourth edition of CSS: The Definitive Guide. When you purchase the ebook edition of Flexbox in CSS,you’ll receive a discount on the entire Definitive Guide once it’s released. Why wait? Learn how to make your web pages come alive today.
Solve layout challenges for applications that grow,shrink,or change orientation on different viewports
Specify the direction material flows,how content wraps,and ways that components expand to fill a space—without altering the underlying markup
Explore CSS properties that apply to the flex container,and those that impact the layout of individual flex items
Work with examples for a responsive two-column layout,a power grid home page,sticky footer,and a calendar
Contents
Preface
Conventions Used in This Book
Using Code Examples
O’Reilly Safari
How to Contact Us
1. Flexbox
The Problem Addressed
Simple Solutions
Learning Flexbox
The display Property
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
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
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
