Flex

Flex Container

display: flex - flex container is the parent of the flex items

• inline-flex - for flex containers which should be situated side by side with other inline elements

flex-direction

• row - default. place items along main axis
• column - place items along cross axis
• row-reverse
• column-reverse

flex-wrap - set whether items should be moved to the new row or column, when they don't fit

• nowrap - default
• wrap
• wrap-reverse

flex-flow - this is a shorthand for flex-direction & flex-wrap

• e.g. flex-flow: column wrap;

gap - sets distance between flex items

• is a shorthand for:
• row-gap
• column-gap

align-items - align items vertically within rows

• flex-start, flex-end
• center
• stretch - is default
• baseline

justify-content - align items horizontally

• flex-start, flex-end - flex-start is default value
• center
• space-between, space-around, space-evenly

place-items - is a shorthand for align-items & justify-items

align-content - align items vertically within flex container

• flex-start, flex-end
• center
• stretch
• space-between, space-around

Flex Items

flex-grow - set whether item should grow wider than the width of its content

• <number> - allow to distribute remaining space proportionally. e.g. 1 is 1 fraction out of all
• 0 - default. item doesn't grow
• if all items have flex-grow set to 1, the remaining space in the container will be distributed equally to all children

flex-shrink - set whether item should shrink its content when needed

• <number> - the higher the number, the more element will shrink compared to the other items in the container
• 1 - default

flex-basis - defines the default size of an item before the remaining space is distributed

• auto - default. width of content

flex - is a shorthand for flex-grow, flex-shrink, flex-basis

• 0 1 auto - default
• tricks:
• flex: 1 1 0; - divide space equally or proportionally between flex-items

align-self - allows to override a value, set by align-items, for specific item

order - allows to set custom order of flex items. by default, items are lying according to the order of elements in layout

• 0 - default value
• <positive number> - if positive number is set only on one item, it will be placed at the end
• <negative number>

Troubleshooting

flex container overflow - might occur when flex item is set to grow, without explicit width, however child of such flex item forces overflow

• solution: min-width: 0 should be set on flex item

CSS Tricks - Guide to Flexbox