Terminology
- Flex Container
- A flex container is space preserved for use after creating a flexbox.
- Flex Items
- Flex items are all the containers created from a flexbox, also known as children.
- Flex Directions
- The flex direction determines the orientation of the flex items.
- Main axis
- The main axis can be described as the left to right or x axis of the flex container.
- Main size properties
- Size could refer to the height, width, or number of characters of elements or inputs.
- Cross axis
- The cross axis is similar to the y axis of a grid running down to up of a flex container.
- Cross size properties
- The length of the items on the cross axis.
Properties
Flex Container Properties
- flex
-
flex-grow; /* a number that determines how much a flex item grows */ - flex-direction
-
row; /* displays items horizontally */row-reverse; /* opposite of row */ - flex-wrap
-
nowrap; /* flex item will not wrap */wrap; /* flex items wrap if necessary */wrap-reverse; /* items wrap in reverse order */ - display
-
block; /* flex items are displayed as a block */inline; /* flex items are displayed inline */ - justify-content
-
flex-start; /* items are aligned at the beginning of the container */flex-end; /* items are aligned at the end of the container */ - row-gap
-
length; /* row gap with any length value or percentage */normal; /* the default row gap of 1em */ - column-gap
-
length; /* column gap with any length value or percentage */normal; /* the default column gap of 1em */
Flex Item Properties
- order
-
number; /* specifies the order with a default value of 0 */initial; /* sets the order to 0 */inherit; /* the same order value as the parent item */ - flex-grow
-
number; /* specifies how much the item will grow */initial; /* the default value */ - flex-shrink
-
number; /* specifies how much the item will shrink */initial; /* the default value */ - flex-basis
-
number; /* specifies the initial length of a flex item */initial; /* the default value */ - align-self
-
center; /* Put the item around the center */flex-start; /* Put the item at the start */ - flex
-
flex-grow; /* a number that determines how much a flex item grows */flex-shrink; /* a number that determines how much the flex item shrinks */