Easy to Understand Flexbox
What is flexbox? It’s a css tool that makes arranging elements on your page a little more, well flexible. It stands for “flexible box” and it allows the designer to move items within a container to fill the available space without overflow. Most importantly flexbox understands that the available space changes if pages are made smaller or larger, and adjusts accordingly.
When you add the { display: flex } property in the parent container, it will place the items along a horizontal axis from left to right or on a “row”. It’s important to remember that left is the “start” and right is the “end” because you can specifically place items to “start” from the left or “end” at the right.
When you add the { align-items: } property it allows you to place the items along the opposite axis of the display. In the case of using flexbox, which aligns items along the row, align-items will place them along the vertical axis, or the column.
With understanding this basic layout one can dive further into just how powerful Flexbox can be. Use “justify-content” to align multiple items along a row. Use “order” to specifically order those items. The list goes on. The best way to understand is to open an index.html and a styles.css file and try it yourself!
Resources:
