A flex container expands items to fill available free space or shrinks them to prevent overflow. The main idea behind the flex layout is to give the container the ability to alter its items’ width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). Do this by changing the value of the display property to flex.The Flexbox Layout (Flexible Box) module ( a W3C Candidate Recommendation as of October 2017) aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word “flex”). To use flexbox you need to declare that you want to use a flex formatting context and not regular block and inline layout. Let's see how flexbox behaves by taking a group of different sized items and using flexbox to lay them out. You will see how this all works in practice throughout this guide, for now just keep in mind that the main axis follows your flex-direction. Also, if you have wrapped flex lines, you can treat those lines as a group to control how space is assigned to those lines. 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.

Display flex horizontal align