Flexbox Layouts

Resource Flex Layout 1

The first site I looked at was tobiasahlin.com. He showed ten different examples of possible layouts. Using inspect I did see that his examples were set up using a flexbox. One feature of the page which caught my eye was in the header. There was an animation that showed a visual representation of each example in a loop. There are two ways to get to the discussion of each example. Either by scrolling down the page or by clicking the image of each sample. In one of the sample discussions, he mentioned that in CSS the order property only changes the visual order of items, which caught my eye since that was one of this weeks quiz questions.

Resource Flex Layout 2

My next resource is webCIFAR.com. This was a YouTube video tutorial on doing an overlapping layout with a CSS flexbox. One child element in the flex container is an image and the other text. In the mobile view, the flex-direction is column so that the two are stacked one above the other and for larger viewports the flex-direction is row so that they overlap side by side. What I liked about this video is that he wrote the code as he built the page so that you could see what each step did as he was doing it. As in class, he would put in a background color in some areas just to highlight what space a particular element was taking up.

Resource Flex Layout 3

My third resource is stephaniewalker.design. She made the point that using the flexbox layout is important as it can easily solve design issues that used to be difficult to do. Also that now flexbox is more supported than the grid layout. To help make it easier to learn, she lists a number of the fun sites that use the game format in their instruction. She included the "Flexbox Froggy Game", "Flexbox Defense Game" (defend against the enemy), "Flexbox Playground" (moving around color blocks), "Fruity Flexbox Cheatsheet", "Freecode Camp" (big, colorful animated GIFs) and "Flexbox Patterns" (geared towards tabs and cards).

Summary