You can think of a flex element as a parent container with display:flex. Elements placed inside this container are called items. Each container has a flex-start and flex-end point as shown in the diagram above.

While the list of items is provided in a linear way, Flex requires you to bemindful of rows and columns. For this reason, it has two coordinate axis. Thehorizontal axis is referred to as Main-Axis and the vertical is the Cross-Axis.

To control the behavior of the content’s width and gaps between it, and to enable it to stretch horizontally across the Main-Axis, you will use justify properties. To control the vertical behavior of items you will use align properties.

The first question I (and many people in my audiences) had was, “why don’t these follow the Top, Right, Bottom, Left order we are used to from everything else in CSS?” They actually go in the reverse order to those values: Top, Left, Bottom, Right! Is the CSS Working Group actively trying to make things difficult?

The answer is that these values have moved away from the underlying assumption that content on the web maps to the physical dimensions of the screen, with the first word of a sentence being top left of the box it is in. The order of lines in

We recently released a new and improved version of Connect, our suite of tools designed for platforms and marketplaces. Stripe’s design team works hard to create unique landing pages that tell a story for our major products. For this release, we designed Connect’s landing page to reflect its intricate, cutting-edge capabilities while keeping things light and simple on the surface.

In this blog post, we’ll describe how we used several next-generation web technologies to bring Connect to life, and walk through some of the finer technical details (and excitement!) on our front-end journey.

React’s diffing algorithm allows developers to author user interfaces in a declarative way, without worrying about how to handle updates when the backing data changes. When a component is updated, React only applies the parts that changed to the DOM. This results in fluid interface transitions, devoid of flickering.

When I was learning React, an assumption I made was that a component will only be re-rendered if something it depends on changes, e.g. a passed in property or the component’s own state is updated. I was surprised to learn this is not true.

Part of the misconception was that I didn’t understand that rendering a component and updating the DOM for that component are two separate steps in the lifecycle. The component has to be re-rendered in order for the diffing algorithm to compare it to the previous output. If the output is different, it will update the DOM accordingly. Re-rendering often isn’t necessarily a bad thing; components are typically small, focused, and cheap. In my case the component was not cheap, and it was being re-rendered

CSS Grid is a two-dimensional layout system created specifically to tackle grid-based user interfaces on the web.

Grids are fundamental to the design of layouts. Over the Web’s relatively short life-span, developers have been trying all kinds of methods and hacks for laying out content in the browser. We started off with no way to do page layout, to table-based layouts, followed by float-based layouts. But those approaches were, at best, workarounds, because neither tables nor floats were meant to be used as true layout tools.

Enter CSS Grid. The Grid Layout Working Draft was published back in April 2011. Three of the four authors were from Microsoft and the