Flexbox in CSS
Understanding CSS Flexible Box Layout
Publisher: O'Reilly Media
Final Release Date: May 2017
Pages: 154

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
Table of Contents
Product Details
About the Author
Colophon
Recommended for You
Customer Reviews

REVIEW SNAPSHOT®

by PowerReviews
oreillyFlexbox in CSS
 
3.0

(based on 2 reviews)

Ratings Distribution

  • 5 Stars

     

    (1)

  • 4 Stars

     

    (0)

  • 3 Stars

     

    (0)

  • 2 Stars

     

    (0)

  • 1 Stars

     

    (1)

Reviewed by 2 customers

Displaying reviews 1-2

Back to top

(1 of 1 customers found this review helpful)

 
5.0

The start is partially overwhelming, the rest better

By h2m2@mailworks.org

from h2m2@mailworks.org

About Me Developer

Verified Reviewer

Pros

  • Helpful examples

Cons

    Best Uses

    • Expert
    • Intermediate

    Comments about oreilly Flexbox in CSS:

    I downgraded the raw edition based on the first 15-20 pages.
    In fact, my findings were correct.

    The book is still recommendable for those who worked with flexbox.
    It covers the scenarios in thorough depth.

    After a few faults at the start of the book, I have to say the book delivers a good content. It is certainly my reference for flexbox.

    (0 of 3 customers found this review helpful)

     
    1.0

    The raw and unedited version requires an refactoring...

    By h2m2

    from www

    About Me Developer

    Verified Reviewer

    Pros

    • entirely inaccurate
    • impossible to understand
    • poorly structured

    Cons

    • Difficult to understand
    • logical errors
    • multiple words for single semantic
    • Too many errors

    Best Uses

    • Masochists

    Comments about oreilly Flexbox in CSS:

    ´0 stars. The whole undertaking is careless jargon. The author can certainly do better. But the book is a nightmare.

    one example .

    on p14 it says:
    The display, flex-direction, flex-wrap, and flex-flow properties impact the ordering and orientation of the flex container.

    Okay, so this is an information. Kind of vocabulary to swallow. Let us move on.

    "The flex-flow shorthand property".

    Note: this property was not introduced. It is introduced now. Not before, where flex-wrap was inrtroduced.
    Can you guess what a shorthand property is? I cannot.

    Then we hear of the word main axes "main and cross axes". The word was introduced as main-axis. (You cannot search for main axes, only for main-axis.).

    We are presented a card with the header flex-flow on it. Remember flex-flow was a property.
    flex-direction, flex-wrap were properties as well. On the card, the flex-direction and flex-wrap are values of a property.

    This is confusing, is it not ? However, we are presented with this confusion as if it were an explanation.
    Below the card we read:
    "The flex-flow shorthand property sets the flex-direction and flex-wrap properties to define the flex container's wrapping and main and cross axes."

    So there are properties and porperties of properties . Good to know. We have a relation of properties and a hierarchy? Confusion all over the place here.

    "As long as display is set " .... display of what is set ? Of a child, of another item? There must be a context and a relation and that should be reflected in the language.

    "As long as display is set to flex or inline-flex, omitting flex-flow, flexdirection and flex-wrap is the same as declaring any of the following three:"
    unfortunately , the three keywords had not been explained beforehand. So the author defines sth (which is to be defined i.e. it is unknown) with three unknows. Cool.

    The whole undertaking is currently careless jargon.
    The author should seriously rework this unstructured assembly.

    Displaying reviews 1-2

    Back to top

     
    Buy 2 Get 1 Free Free Shipping Guarantee
    Buying Options
    Immediate Access - Go Digital what's this?
    Ebook:  $9.99
    Formats:  DAISY, ePub, Mobi, PDF