/* Display: It enables a flex container; inline or block */
display: flex;
/* Flex-direction: Determines the direction of the items. */
flex-direction: row
/* Flex-wrap: Determines whether the flex items should wrap or not. */
flex-wrap: wrap;
/* Justify-content: This property is used to align the flex items. flex-wrap: nowrap; */
justify-content: flex-start;
/* Align-items: Determines the behavior for how flex items are laid out along the cross-axis on the current line. */
align-items: flex-start;
/* Align-content: specifies the distribution of space between and around content items along a flexbox's cross-axis */
align-content: flex-start;
/* Order: It is used to control the order in which flex items appear in the flex container. */
order: 1;
/* Flex-grow: It allows representing the ability of a flex item to grow by your choice. */
flex-grow: 1;
/* Flex-basis: This defines the default size of an element before the remaining space is distributed */
flex-basis: 50%;
/* Flex-shrink: Defines the ability for a flex item to shrink. */
flex-shrink: 3;
/* Align-self: Sets the alignment for individual items. */
align-self: flex-start;