Flexbox is built on two key components: the Flex Container and the Flex Items. Understanding their roles and how they interact is essential for mastering Flexbox.

Flex Container

The Flex Container is the parent element that contains and organizes the Flex Items. To create a Flex Container, we need to apply the display property with the values flex or inline-flex to an element.

css

The display: flex; makes the container behave as a block-level flex container, while display: inline-flex; makes the flex container behave as an inline flex container.

Flex Container Example

html

css

[Placeholder: Image of a flex container with three items inside, distributed horizontally with space between them]

Flex Items

The Flex Items are the direct children of the Flex Container. These items are arranged within the container based on the rules defined by Flexbox.

Flex Items Example

Continuing with the previous example, the flex items are the divs within the flex-container.

html

In this case, flex-container is the Flex Container and each flex-item is a Flex Item.

Properties Applicable to the Flex Container

Here are some key properties applicable to the Flex Container that define how the Flex Items are arranged:

1. flex-direction: Defines the direction of the main axis.
2. flex-wrap: Allows the Flex Items to wrap onto multiple lines.
3. justify-content: Aligns the Flex Items along the main axis.
4. align-items: Aligns the Flex Items along the cross axis.
5. align-content: Aligns the lines of Flex Items along the cross axis when there is extra space in the container.

Example of Flex Container Properties Usage

css

Properties Applicable to the Flex Items

Here are some key properties applicable to the Flex Items:

1. order: Changes the order of the Flex Items.
2. flex-grow: Allows the Flex Items to grow if necessary.
3. flex-shrink: Allows the Flex Items to shrink if necessary.
4. flex-basis: Defines the flexible basis (initial size) of an item.
5. flex: Is a shorthand for flex-grow, flex-shrink, and flex-basis.
6. align-self: Allows the alignment of a single Flex Item along the cross axis to be overridden.

Example of Flex Items Properties Usage

css

Complete Example

html

[Placeholder: Image showing the flex container with three items having different order and flex-grow settings, distributed in a way that illustrates how they affect each other]

Setting up the Flex Container and its items enables you to create highly flexible and adaptable layouts. As we progress, we will explore these properties in more detail so you can fully leverage Flexbox in your projects.