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.

Sometimes the first bit of HTML we write in a new document is an element that wraps everything else on the page. The term wrapper is common for that. We give it a class, and that class is responsible for encapsulating all visual elements on the page.

I've always struggled to with the best way to implement it. I found a related thread on StackOverflow that has more than 250,000 views, so obviously I'm not the only one wondering! I'll sum up my latest thoughts in this article.

Before we dive into it, let's first examine the difference between the "wrapper" and the "container".

In the last couple of weeks I have started to see CSS Grid layout based frameworks and grid systems appearing. I’m actually surprised as to how long it has taken, but I am yet to see one that adds any value at all over just using CSS Grid Layout. Worse, the ones I have seen so far go backwards. They limit themselves by replicating the past rather than looking to the future. A common theme being that they require row wrappers in markup.

Why is grid different?

Grid is a grid system. It allows you to define columns and rows in your CSS, without needing to define them in markup. You don’t need a tool that helps you make it

Let’s say you work on a huge project with many people and it is important to you that a library will be called from a wrapper you created around it or at least they know about the existence of such a wrapper.

After it’s initialization:

Any developer can just import it and use it as they wish:

But what if you have a fancy wrapper around it that reports errors to a remote server, and formats and standardizes the logs?

You wouldn’t want developers to use it directly but to use your module instead. And they will use it directly. In some point, they will. Trust me.

Since the last 3 new languages I've tried were all back-end languages, I've decided to try a language that promises to be a "delightful language for reliable webapps". Enter elm, a language that is supposed to be easy, bug free and far more performant than ember, react or any of the angulars. So, I started off my elm training with the standard tutorial set.

I wasn't filled with confidence when I ran elm-make on one of the example projects "01-button.elm". The output file js code began like this:

Thanks to Flexbox, a new layout mode in CSS3, we can get all of our cards in a row, literally. Card layouts have grown in popularity over the past few years – as you’ve probably noticed, social media sites have really embraced cards. Pinterest and Dribbble use cards to feature information and visuals. And if you’re into Material Design, Google’s cards are well described in their pattern library.

I personally like card layouts for their readability and how scrollable they are. They present the perfect “burst” of information in a way that is easy to browse, scroll, and scan all at once.

In this tutorial, we are going to explore CSS Exclusions. At the first glance, CSS Exclusions may look similar to CSS Shapes in that they wrap content around an element. Technically, however, they serve a different purpose.

The CSS Shapes Module defines an element’s real shape, but content will not wrap around that shape until the element is floated. The CSS Exclusions Module, on the other hand, is specifically designed for this; allowing inline content to wrap around an element without floating it, regardless of how the element is positioned—absolute, relative, or fixed.

Properties

The CSS Exclusions Module introduces a couple of new properties and values, namely: