Flexbox Glossary

CSS Flexbox is a powerful layout module that provides an easy and efficient way to arrange items within a container. The properties are divided into those that apply to the flex container and those that apply to the flex items.

Flex Container Properties

1. display

   • Values: flex, inline-flex
   • Description: Defines a flex container and enables flexbox layout for its children.

2. flex-direction

   • Values: row, row-reverse, column, column-reverse
   • Description: Specifies the direction of the flex items within the flex container.

3. justify-content

   • Values: flex-start, flex-end, center, space-between, space-around, space-evenly
   • Description: Aligns the flex items along the main axis.

4. align-items

   • Values: stretch, flex-start, flex-end, center, baseline
   • Description: Aligns flex items along the cross axis.

5. flex-wrap

   • Values: nowrap, wrap, wrap-reverse
   • Description: Controls whether the flex container is single-line or multi-line, and the direction of the cross axis.

6. align-content

   • Values: stretch, flex-start, flex-end, center, space-between, space-around
   • Description: Aligns the flex lines when there is extra space on the cross axis.

7. gap

   • Values: length (e.g., 10px, 1em)
   • Description: Sets the gap (gutters) between the flex items.

Flex Item Properties

1. flex

   • Values: none, [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
   • Description: A shorthand for setting flex-grow, flex-shrink, and flex-basis together.

2. align-self

   • Values: auto, flex-start, flex-end, center, baseline, stretch
   • Description: Overrides the align-items property for individual flex items.

3. order

   • Values: <integer>
   • Description: Controls the order of the flex items within the flex container.

4. flex-grow

   • Values: <number> (default is 0)
   • Description: Defines the ability of a flex item to grow if necessary.

5. flex-shrink

   • Values: <number> (default is 1)
   • Description: Defines the ability of a flex item to shrink if necessary.

6. flex-basis

   • Values: auto, <length> (e.g., 20%, 10px)
   • Description: Specifies the initial size of a flex item before the remaining space is distributed.

Explanation of Usefulness

Flex Container Properties

1. display: Without this, the flex container and its children will not be able to use any flex properties.
2. flex-direction: Essential for determining the main axis along which items are laid out.
3. justify-content: Crucial for defining how extra space is distributed along the main axis.
4. align-items: Important for controlling alignment on the cross axis.
5. flex-wrap: Useful for handling items when the container cannot fit them in a single line.
6. align-content: Only relevant when there are multiple lines; controls spacing between lines.
7. gap: Simplifies spacing between items without needing margins.

Flex Item Properties

1. flex: A shorthand that often suffices for most use cases involving item flexibility.
2. align-self: Provides item-level control over alignment.
3. order: Simple yet powerful for reordering items without changing the HTML.
4. flex-grow: Important for defining how items grow relative to each other.
5. flex-shrink: Controls how items shrink relative to each other when space is tight.
6. flex-basis: Allows explicit control over the initial size of items before space distribution.