CSS Tricks Flexbox Guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Using flexbox on an actual website requires a bit of know-how in regards to how elements with
display: flex interact with sub-flex properties such as
When used with
display: flex, properties like
align-items determine how an element's children are laid out within a div. For instance, let's say we had the following markup:
<section> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </section>
By default, div tags have a display of
block meaning they take up the full width of their parent container, and are stacked on top of each other like blocks. But let's say we wanted to keep our structure as is, yet move the
div elements so that they're placed directly next to each other on the x-axis, rather than being stacked like blocks.
To do this, we could add a
display: flex style to the divs' parent: the section tag.
<section style="display: flex"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </section>
Just with the parent tag having
display: flex all of the children block elements will be placed next to eachother, only taking up the exact amount of space of the content within them.
Since the section tag has
display: flex, you can begin adding on the sub-flex properties I mentioned earlier such as
align-items. These two properties only work if used with an element that has
display: flex, so make sure you double check that you've met that requirement when applying the two properties.
justify-content property determines how a flex element's children are spaced out across its horizontal axis. By setting equal to a value such as
justify-content will effectively space out all children elements with an even amount of spacing in between them.
justify-content value is
center, which will center all flex children horizontally, in the middle of whatever container
justify-content are applied to.
align-items property determines how flex children are laid out on the vertical axis of a flex container. The most common value you'll use for this property is
center. It's a long-running joke on how impossible it is to center a div vertically using HTML and CSS, but with
align-items: center, this joke becomes a thing of the past as those two properties will give you the exact effect you need to ensure all of your flex children are perfectly aligned in the center of their parent container.