To understand how Flexbox works, it is essential to familiarize yourself with some key concepts and terminology. Flexbox introduces several specific terms and properties that will allow you to control the arrangement of elements more precisely.

Key Terminology

1. Flex Container: The parent component that has display: flex; or display: inline-flex;. This container establishes the Flex context for its children.

2. Flex Items: The direct children of the Flex container. These elements are arranged using Flexbox properties.

3. Main Axis: The main axis in which the Flex items are placed. By default, this axis is horizontal (left to right).

4. Cross Axis: The axis perpendicular to the main axis. By default, this axis is vertical (top to bottom).

5. Main Start and Main End: The starting and ending positions of the main axis.

6. Cross Start and Cross End: The starting and ending positions of the cross axis.

Fundamental Properties

Flex Container Properties

1. display: Defines a flex container. It can be flex or inline-flex.

   css
   

2. flex-direction: Sets the direction of the main axis (default is row).

   css
   

3. flex-wrap: Decides if the flex items should wrap when they do not fit in a single line.

   css
   

4. flex-flow: A shorthand for the flex-direction and flex-wrap properties.

   css
   

5. justify-content: Aligns the items along the main axis.

   css
   

6. align-items: Aligns the items along the cross axis.

   css
   

7. align-content: Aligns the flex lines along the cross axis when there is extra space.

   css
   

Flex Item Properties

1. order: Modifies the order of the items within the container.

   css
   

2. flex-grow: Defines the ability of an item to grow if necessary.

   css
   

3. flex-shrink: Defines the ability of an item to shrink if necessary.

   css
   

4. flex-basis: The flex basis of an item before the remaining space is distributed.

   css
   

5. flex: A shorthand for flex-grow, flex-shrink, and flex-basis.

   css
   

6. align-self: Allows the alignment of a single item along the cross axis, overriding align-items.

   css
   

Explanatory Images

1. [Placeholder: Image showing a container with display: flex; and several flex items arranged in a horizontal row.]
2. [Placeholder: Diagram illustrating the concepts of main axis and cross axis, along with main start, main end, cross start, and cross end.]

These concepts are fundamental to making the most of Flexbox's capabilities. In the following chapters, we will dive deeper into each of these properties and their use in various scenarios.