You can move the items individually or as a group, so they align against each other and the flex container. The cross axis runs in the other direction to the main axis, so if flex-direction is row the cross axis runs along the column. Remember: we've got a bunch of things and we are trying to get the best layout for them as a group. If that is row your main axis is along the row, if it is column your main axis is along the column.įlex items move as a group on the main axis. The main axis is the one set by your flex-direction property. The key to understanding flexbox is to understand the concept of a main axis and a cross axis. The items themselves can be aligned on the cross axis.Space can be distributed around the items and flex lines in a wrapped layout, using the Box Alignment properties.Space can be distributed inside the items, so they become bigger and smaller according to the space available in their parent.Items in the layout can be visually reordered, away from their order in the DOM.They are single line by default, but can be asked to wrap onto multiple lines.They respect the writing mode of the document.They can display as a row, or a column.
See the Pen Pen xxgERMp by web-dot-dev on Codepen What can you do with a flex layout? #įlex layouts have the following features, which you will be able to explore in this guide. 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. Items in Flexbox are arranged horizontally or vertically depending on whether you specify row or column for your flex-direction.
0 kommentar(er)
