1
2
3
4

flex-direction

row
row-reverse
column
column-reverse

flex-wrap

nowrap
wrap
wrap-reverse

justify-content →

flex-start
flex-end
center
space-between
space-around
space-evenly

align-items ↓

flex-start
flex-end
center
baseline
stretch

//Output Parent Element

.element {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}

All Child Items

flex-grow and flex-basis work with flex-direction: row → and column ↓

flex-grow
flex-basis

//Output All Child Items

.element item {

}

Flex Gap

row-gap ↓ - column-gap →

/* styles for flex-gap */
.container {
 gap: 20px;/* row and column gap */
 gap: 20px 30px/* row-gap column-gap */
 row-gap: 20px;
 column-gap: 30px;
}

flex-flow Shorthand

Shorthand exists for flex-direction and flex-wrap called flex-flow for example:

/*replace*/
flex-direction: row;
flex-wrap: wrap;

/*with*/
flex-flow: row wrap;

flex-grow Shorthand

Shorthand exists for flex-grow, flex-shrink and flex-basis for example:

/*replace*/
flex-grow: 1;
flex-shrink: 2;
flex-basis: 0;

/*with*/
flex: 1 2;
/*replace*/
flex-grow: 1;
flex-shrink: 1;
flex-basis: 20px;

/*with*/
flex: 1 20px;
/*replace*/
flex-grow: 1;
flex-shrink: 2;
flex-basis: 300px;

/*with*/
flex: 1 2 300px;

See Flexbox Items