While this may seem more intuitive for rows, the same justify-content property can be applied to Flexbox columns too! For example, check out how space-around presents on a column. How about we test out each value to see what happens? justify-content valuesĭo you see how the elements align differently depending on the value of justify-content? With one simple property, we can intelligently align elements the way we want. Space-around : elements are spread out along the axis, but there's also space around the edges Space-between : elements are spread out along the axis (there's space between each) To change their alignment, use justify-content, which can accept the following values:įlex-start : aligned at the start of the containerįlex-end : aligned at the end of the containerĬenter : aligned in the center of the container We'll start with elements that are aligned horizontally because that's the case by default. Main and cross axes Alignment along the main axis If the elements are arranged vertically in a column (or columns), the main axis is vertical, and the cross axis is horizontal. If the elements are arranged horizontally in a row (or rows), the main axis is horizontal, and the cross axis is vertical.
The perpendicular direction is therefore the cross axis. This "main" direction is what we call the flex items' main axis.
We have also seen how to center the image by example on the full page by simply making the height of the div as the height of the page using viewport units where 100vh equals 100% of the height of the viewport.Items in Flexbox are arranged horizontally or vertically depending on whether you specify row or column for your flex-direction. We've also seen how to center images inside a container div, horizontally and vertically, using Flexbox' properties like justify-content and align-items and setting their values to center.
For example, setting the line height of the text to be centered to the same height as the container of the text or using Flexbox by simply setting the justify-content and align-items properties to center.
We have seen how to center text horizontally using the text-align property with the center value.įor vertically centering text in CSS, we have seen both an old and new way. The align-items and align-self properties control alignment of our flex items on the cross axis, down the columns if flex-direction is row and along the row if flex-direction is column. This example was demonstrated with an Angular 8 project but these tricks are not tied to Angular in any way. In this article, we've seen how we can center elements in CSS horizontally and vertically using Flexblox which provides easy and clear ways to achieve that without resorting to old CSS tricks.
0 kommentar(er)
