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
The animal on the cover of Transitions and Animations in CSS are salmon (salmonidae), which is a family of fish consisting of many different species. Two of the most common salmon are the Pacific salmon and the Atlantic salmon.
Pacific salmon live in the northern Pacific Ocean off the coasts of North America and Asia. There are five subspecies of Pacific salmon, with an average weight of 10 to 30 pounds. Pacific salmon are born in the fall in freshwater stream gravel beds, where they incubate through the winter and emerge as inch-long fish. They live for a year or two in streams or lakes and then head downstream to the ocean. There they live for a few years, before heading back upstream to their exact place of birth to spawn and then die.
Atlantic salmon live in the northern Atlantic Ocean off the coasts of North America and Europe. There are many subspecies of Atlantic salmon, including the trout and the char. Their average weight is 10 to 20 pounds. The Atlantic salmon family has a life cycle similar to that of its Pacific cousins, and also travels from freshwater gravel beds to the sea. A major difference between the two, however, is that the Atlantic salmon does not die after spawning; it can return to the ocean and then return to the stream to spawn again, usually two or three times.
Salmon, in general, are graceful, silver-colored fish with spots on their backs and fins. Their diet consists of plankton, insect larvae, shrimp, and smaller fish. Their unusually keen sense of smell is thought to help them navigate from the ocean back to the exact spot of their birth, upstream past many obstacles. Some species of salmon remain landlocked, living their entire lives in freshwater.
Salmon are an important part of the ecosystem, as their decaying bodies provide fertilizer for streambeds. Their numbers have been dwindling over the years, however. Factors in the declining salmon population include habitat destruction, fishing, dams that block spawning paths, acid rain, droughts, floods, and pollution.
The cover image is a 19th-century engraving from the Dover Pictorial Archive. The cover fonts are URW Typewriter and Guardian Sans. The text font is Adobe Minion Pro; the heading font is Adobe Myriad Condensed; and the code font is Dalton Maag’s Ubuntu Mono.
The raw and unedited version requires an refactoring...
About Me Developer
impossible to understand
Difficult to understand
multiple words for single semantic
Too many errors
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 ﬂex-ﬂow 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.
Bottom Line No, I would not recommend this to a friend