Flexbox is a layout mechanism designed for laying out groups of items in one dimension. Learn how to use it in this module.
Things can we do with Flex layout:
They can display as a row, or a column.
They respect the writing mode of the document.
They are single line by default, but can be asked to wrap onto multiple lines.
Items in the layout can be visually reordered, away from their order in the DOM.
Space can be distributed inside the items, so they become bigger and smaller according to the space available in their parent.
Space can be distributed around the items and flex lines in a wrapped layout, using the Box Alignment properties.
The items themselves can be aligned on the cross axis.
Axes in flex:
The key to understanding flexbox is to understand the concept of a main axis and a cross axis. The main axis is the one set by your flex-direction property. If that is row your main axis is along the row, if it is column your main axis is along the column.
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.
Controlling direction of items in flex:
Even though you haven't added a flex-direction property yet, the items display as a row because the initial value of flex-direction is row. If you want a row then you don't need to add the property. To change the direction, add the property and one of the four values:
row: the item layout as a row.row-reverse:the layout of the items as a row from the end of the flex container.column: the items lay out as a column.column-reverse: the layout of the items as a column from the end of the flex container.
Wrapping flex-items:
The initial value of the flex-wrap property is nowrap. This means that if there is not enough space in the container the items will overflow.
Items displaying using the initial values will shrink as small as they can, down to the min-content size before overflow happens.
To cause the items to wrap add flex-wrap: wrap to the flex container.
Controlling space inside flex items:
Assuming our container has more space than is needed to display the items, the items line up at the start and do not grow to fill the space. They stop growing at their max-content size. This is because the initial value of the flex- properties is:
flex-grow: 0: items do not grow.flex-shrink: 1: items can shrink smaller than theirflex-basis.flex-basis: auto: items have a base size ofauto.
This can be represented by a keyword value of flex: initial. The flex shorthand property, or the longhands of flex-grow, flex-shrink and flex-basis are applied to the children of the flex container.
To cause the items to grow, while allowing large items to have more space than small ones use flex:auto. You can try this using the demo above. This sets the properties to:
flex-grow: 1: items can grow larger than theirflex-basis.flex-shrink: 1: items can shrink smaller than theirflex-basis.flex-basis: auto: items have a base size ofauto.
Thanks for reading this blog! 😊