There is a lot of documentation out there to learn how to use flexbox layout. With that, there are many go-to sites that cover a wide range of topics and help break everything down for learning. Some of the widely used guides include CSS-Tricks, which explains how to turn a container into a flex container. It also explains how all direct children become flex items, which helps unlock layout controls like alignment, spacing, and direction. I like the fact that it gives lots of visuals covering what each item does. Then there are more technical sites like Web Docs and W3Schools that provide more technical explanations with demo code to help explain row and column layouts. I also found some other sites below that help break down flexbox layouts with more visuals similar to CSS-Tricks.
Flexbox Layout Resource - freecodecamp.org
First, there is freecodecamp.org. This site breaks down learning flexbox layout step by step. The page feels like it keeps scrolling, but it takes you through one step at a time by first explaining what each item is and then discussing each of the values that go along with it. Plus, each section gives visuals showing what the layouts look like using very colorful blocks to visually demonstrate each outcome. Although the page is very long, making it harder to find specific items, it is really nice that it breaks everything down step by step.
Flexbox Layout Resource - quackit.com
The second site that I found is quackit.com, which breaks down each topic in flexbox with lots of ways to learn it. It first explains everything about flexbox, including what it is and how to use it in a website, complete with picture visuals and code examples to go along with it. Then it breaks down flexbox layout examples to show what you can create with flexbox. Lastly, it explains each of the flexbox properties and their values. I like that this site gives lots of visuals, but it also separates topics into different pages, allowing you to easily look up and learn about one topic at a time.
Flexbox Layout Resource - codehs.com
The third site that I found was codehs.com, which is a very brief site that breaks everything down in text using very simple and quick wording. I would say that this site is more helpful for advanced users who need a refresher or are just looking to understand all the values associated with each flexbox property. It does have a code area that you can adjust and run to see the outcome. This site also talks about grid layout so you can understand what each layout system does and the differences between them all in one area. I still think this works better as a quick reference site for those who already understand flexbox a bit more, but it is still a great resource.
Flexbox Layout Resource - flexbox.malven.co
Lastly, I found a great quick-reference site called flexbox.malven.co. It has almost nothing on it except the name of each property and value and a visual reference showing what it does. I think this is great to have because it acts as a quick visual reminder of the different properties and how they visually transform layouts.
Summary
Overall, I found that Flexible Box Layout is a great modern layout system that can create responsive and flexible designs. By using display: flex on a container, all child elements become flex items that can be aligned, spaced, and ordered efficiently. There are lots of sources available with many examples showing how to use flexbox in your designs and how to take advantage of it to create different layouts. Some sources provide more technical descriptions, while others focus more on visuals showing how everything works. Either way, there are many great ways to learn and become more comfortable with flexbox.