MDN Web Docs: Basic Concepts of Flexbox
URL: MDN Web Docs: Basic Concepts of Flexbox
This first resource provided me with an overview summary on flexbox. Flexbox is a one-dimensional (either horizontal or vertical) way to layout content and can provide a variety of spacing between items. Once an element contains “display: flex”, it becomes a flexbox container and no longer adheres to the default browser layout and will start off being organized into rows, starting where the main axis starts. There are two axes: the main axis (where either row, row reverse, column, or column reverse can be chosen) and the cross axis which is perpendicular to the main axis. All elements inside the flex container are referred to as flex, and flex items by default begin at the start of the main axis (flex-start). The direction of flex (also known as flex direction) can be changed, as well as where the first flex item begins using align-items with values such as flex-start, flex-end, center, and stretch, or justify-content with values such as flex-start, flex-end, center, space-around, space-between, and space-evenly. Content does not move to the next line unless permitted with flex wrap. The shorthand for flex was also described. It begins with flex: the first value is the flex-grow value, the second value is the flex-shrink value, and the third value is the flex-basis value.
CSS Flexbox Layout Guide
I know this resource was discussed in class, but I wanted to explore it further and include it in my research and documentation this week. This resource further goes into the history of flexbox (did not know it was first adapted in 2017) and its intended purpose, which is alter item’s width and heights to best use screen space on a variety of screens. Flexbox is advised when it comes to application components and small-scale layouts. For larger scale layouts are suggested, like grid. This resource also provided some additional information not covered in the first resource, such as describing more in depth the difference between align-items (alignment along the cross axis) and justify-content (alignment along the main axis). When it comes to arranging flex items within a flex container, some justify-content values are not supported by some browsers and that the safest choices are flex-start, flex-end, and center. The pictures helped me more clearly understand some of the align-terms, especially center and baseline. I also grasped a better understanding of flex-basis: 0 and flex-basis: auto from the pictures provided. In general, I appreciated the pictures/diagrams and down-to-earth descriptions in this resource!
Use Cases for Flexbox
I used the “Additional Resources” from my second resource to explore a final, third resource. This article further explored when it is best to use flexbox (display: flex) versus grid layout (display: grid). Flexbox is all about distribution space and aligning content, where getting the items to look good together is more important than having a pixel perfect size for each item. If wanting a two-dimensional layout, whether it is a small component or a large component, that is which the grid layout should be used instead. The code examples show the differences between using grid layout versus flexbox, as well as when flex-basis has a value versus auto wrapping my head around what each layout looks like and when it is best to use one versus the other.
Summary of Documentation
When I first started this class, I was still quite foggy on flexbox and grid layout. Doing this research and reading through three different resources cleared the fog quite a bit! Having the different visuals helped me to understand the concepts better and I absolutely will bookmark them so I can reference if flex is the best fit for my content, and how to align and space out content when it is.