It’s pretty cool given that just one or two lines of CSS were required to manipulate the layout inside each container. Vertical alignment layout: flex-direction: column Horizontal alignment layout: display: flex Let’s have a quick look at a few examples of what can be done with just a minimum of 1–2 lines of codes using CSS flexbox: So to summarize, it is a layout module that makes things easier to align and distribute space among items in a container. Both horizontal and vertical alignment of the children can be easily manipulated.” In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. By Zeeshaan Maudarbocus What is CSS Flexbox?Īs per the MDN web docs: “CSS Flexible Box Layout is a module of CSS that defines a CSS box model optimized for user interface design, and the layout of items in one dimension. 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.

Display flex horizontal align