CategoryFlexbox

May 11, 2021 — In more recent years, design systems and component libraries have gained popularity. There is also a desire to build once, deploy anywhere. Meaning a component developed in isolation is intended to work in any number of contexts to make building complex interfaces more efficient and consistent. CSS container queries have landed and are now available for experimentation. Let’s look at what problem is being solved, learn how container queries work, and see how they compare with and complement existing CSS features for layout. Read more…

September 4, 2019 — In this article, Rachel Andrew explores the situations in which you might encounter overflow in your web designs and explains how CSS has evolved to create better ways to manage and design around unknown amounts of content. Rachel will show you how new layout methods and new values in CSS can help us to deal with overflow and create less fragile designs. She’ll also explain one of the fundamental concepts behind the design of CSS — that of avoiding data loss. Read more…

January 2, 2019 — You don’t need to commit to memorizing every CSS Property and Value, as there are good places to look them up. There are some fundamental things, however, which will make CSS much easier for you to use. In this article, Rachel Andrew aims to guide you along your path of learning CSS and outline resources for further reading on key areas of modern CSS development. Many of those are things right here on Smashing Magazine. Her aim is to cover the breadth of modern CSS with a focus on a few key areas, that will help to unlock the rest of the language for you. Read more…

October 4, 2018 — In this final article of the series, we wrap up by taking a look at some of the common uses for Flexbox. What should we use Flexbox for, and what it is not so good at? Today, Rachel Andrew is going to spend some time thinking about what the use cases for Flexbox really are, given that you now have CSS Grid Layout, giving some suggestions for what you might use when and a way to decide. Read more…

September 17, 2018 — In the last two articles, we have looked at what happens when we create a flex container, and also taken a look at alignment. This time we explore the often confusing issue of sizing in Flexbox. How does Flexbox decide how big things should be? In this article, Rachel Andrew will explain some of the finer points of how Flexbox works out how big the flex items are. It can seem a little academic, however, taking some time to understand the way this works can save you huge amounts of time when using Flexbox in your layouts. If you and your design don’t agree with what Flexbox thinks is best then you can take control back by setting your own flex-basis. Read more…

August 13, 2018 — For the entire history of CSS Layout, being able to properly align things on both axes seemed like it might truly be the hardest problem in web design. The alignment properties that you might think of as the flexbox alignment properties are now fully defined in the Box Alignment Specification. If you have ever been confused about when to align and when to justify, this article will make things clearer! Today, Rachel Andrew will take a look at the alignment properties in Flexbox while discovering some basic rules to help remember how alignment on both the main and cross axis works. Read more…

August 2, 2018 — In this article, the beginning of a series on Flexbox, Rachel Andrew will take a detailed look at what actually happens when you add display: flex to your stylesheet. She will take the initial values of Flexbox, in order to explain what actually happens when you say display: flex. It’s a surprising amount once you begin to unpack it, and contained within these few properties are many of the key features of flex layouts. Read more…

June 4, 2018 — In this tutorial, you will build a sci-fi ID card for Avengers. Today, Kunal Sarkar will teach you Flexbox, Nested Flexbox, CSS animations, and a ton of other CSS techniques while building this interesting project. You will learn an effective way of making a full-page background, centering elements with Flexbox and auto margins, and see the basic usage of Flexbox and nested Flexboxes to make single dimension layouts. Let’s get started! Read more…

September 28, 2017 — Prior to CSS Grid Layout landing in browsers, many people saw flexbox as the answer to all of our design-related problems. However, flexbox doesn’t provide a grid system any more than floats do, although it does make creating one simpler. CSS Grid is such a different way of approaching layout that there are a number of common questions Rachel Andrew is asked as people start to use the specification. In this article, she will answer some of those, and will be one in a series of articles on Smashing Magazine about layouts. Read more…

November 8, 2016 — In this article Rachel Andrew explains how Flexbox and CSS Grid fit together, and how we can build resilient and flexible layouts today while providing a decent fallback for older browsers. Editor’s note: Please note that this article is quite lengthy, and contains dozens of CodePen embeds for an interactive view. The page might take a little while to load, so please be patient. Read more…