What will be the result of the following CSS code? Hint: justify$-$content always controls the alignment of items along the main axis, while align$-$items always controls the alignment of items along the cross axis. flex$-$direction determines the main axis.

$.$container $\{$

display: flex;

flex$-$direction: column;

justify$-$content: center;

align$-$items: flex$-$start;

$\}$

$.$item $\{$

width: $100$px;

height: $100$px;

background$-$color: red;

$\}$

What will be the result of the following CSS code? Hint: justify$-$content always controls the alignment of items along the main axis, while align$-$items always controls the alignment of items along the cross axis. flex$-$direction determines the main axis.

$.$container $\{$

display: flex;

flex$-$direction: column;

justify$-$content: center;

align$-$items: flex$-$start;

$\}$

$.$item $\{$

width: $100$px;

height: $100$px;

background$-$color: red;

$\}$