How does setting the `display` property to `flex` on a parent element affect the layout of its child elements?

/ / Published in Web Development, EITC/WD/WFF Webflow Fundamentals, Layout, Flexbox, Examination review

Setting the `display` property to `flex` on a parent element fundamentally transforms the way its child elements are laid out. This transformation is based on the Flexbox (Flexible Box) model, which is designed to provide a more efficient way to lay out, align, and distribute space among items within a container, even when their size is unknown or dynamic. The Flexbox model is particularly beneficial for creating complex layouts and achieving responsive design.

When the `display` property of a parent element is set to `flex`, the parent element becomes a flex container, and its immediate children become flex items. This change introduces a new set of properties and behaviors that govern the layout, alignment, and distribution of the flex items within the flex container. Below, I will detail the specific effects and properties associated with the Flexbox model.

Flex Container Properties

1. `flex-direction`: This property defines the main axis along which the flex items are laid out. The main axis can be horizontal or vertical, and the `flex-direction` property can take the following values:
– `row` (default): Flex items are laid out horizontally from left to right.
– `row-reverse`: Flex items are laid out horizontally from right to left.
– `column`: Flex items are laid out vertically from top to bottom.
– `column-reverse`: Flex items are laid out vertically from bottom to top.

2. `flex-wrap`: This property controls whether the flex items should wrap onto multiple lines. It can take the following values:
– `nowrap` (default): All flex items will be laid out in a single line.
– `wrap`: Flex items will wrap onto multiple lines if necessary.
– `wrap-reverse`: Flex items will wrap onto multiple lines in reverse order.

3. `justify-content`: This property aligns flex items along the main axis and can take the following values:
– `flex-start` (default): Flex items are packed toward the start of the main axis.
– `flex-end`: Flex items are packed toward the end of the main axis.
– `center`: Flex items are centered along the main axis.
– `space-between`: Flex items are evenly distributed along the main axis with the first item at the start and the last item at the end.
– `space-around`: Flex items are evenly distributed with equal space around them.

4. `align-items`: This property aligns flex items along the cross axis (perpendicular to the main axis) and can take the following values:
– `stretch` (default): Flex items are stretched to fill the container.
– `flex-start`: Flex items are aligned at the start of the cross axis.
– `flex-end`: Flex items are aligned at the end of the cross axis.
– `center`: Flex items are centered along the cross axis.
– `baseline`: Flex items are aligned such that their baselines align.

5. `align-content`: This property aligns the flex lines (if there are multiple lines due to wrapping) along the cross axis and can take the following values:
– `stretch` (default): Lines stretch to fill the container.
– `flex-start`: Lines are packed toward the start of the cross axis.
– `flex-end`: Lines are packed toward the end of the cross axis.
– `center`: Lines are centered along the cross axis.
– `space-between`: Lines are evenly distributed with the first line at the start and the last line at the end.
– `space-around`: Lines are evenly distributed with equal space around them.

Flex Item Properties

1. `order`: This property allows you to control the order in which flex items appear within the flex container. By default, all flex items have an `order` value of 0, but you can assign positive or negative integers to change their order.

2. `flex-grow`: This property defines the ability of a flex item to grow relative to the other flex items. It is a unitless value that serves as a proportion. For example, if one flex item has a `flex-grow` value of 2 and another has a value of 1, the first item will take up twice as much space as the second item.

3. `flex-shrink`: This property defines the ability of a flex item to shrink relative to the other flex items. Similar to `flex-grow`, it is a unitless value that serves as a proportion. If space is insufficient, flex items will shrink according to their `flex-shrink` values.

4. `flex-basis`: This property defines the initial main size of a flex item before any space distribution takes place. It can be a length (e.g., `20%`, `100px`) or the keyword `auto`. The `flex-basis` property overrides the `width` or `height` properties of the flex item.

5. `align-self`: This property allows the default alignment (or the one specified by `align-items`) to be overridden for individual flex items. It can take the same values as `align-items` (`auto`, `flex-start`, `flex-end`, `center`, `baseline`, `stretch`).

Practical Examples

Example 1: Basic Horizontal Flex Layout

html
<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>

<style>
  .flex-container {
    display: flex;
    flex-direction: row;
  }
  .flex-item {
    flex: 1;
  }
</style>

In this example, the `.flex-container` is a flex container with a horizontal main axis (`flex-direction: row`). The `.flex-item` elements are flex items, each taking up an equal amount of space within the container because of the `flex: 1` shorthand property (which sets `flex-grow` to 1, `flex-shrink` to 1, and `flex-basis` to 0).

Example 2: Vertical Flex Layout with Wrapping

html
<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
  <div class="flex-item">Item 4</div>
  <div class="flex-item">Item 5</div>
</div>

<style>
  .flex-container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 200px;
  }
  .flex-item {
    flex: 1;
    min-height: 50px;
  }
</style>

In this example, the `.flex-container` is a flex container with a vertical main axis (`flex-direction: column`) and allows wrapping (`flex-wrap: wrap`). The `.flex-item` elements will wrap onto multiple lines if the container's height is insufficient to display all items in a single column. Each `.flex-item` has a minimum height of `50px` and will grow to fill the available space.

Advanced Flexbox Techniques

Aligning Items with `justify-content` and `align-items`

html
<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>

<style>
  .flex-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100px;
  }
  .flex-item {
    flex: 1;
  }
</style>

In this example, the `.flex-container` uses `justify-content: space-between` to evenly distribute the flex items along the main axis with space between them. The `align-items: center` property centers the flex items along the cross axis (vertically, in this case).

Changing Order with `order`

html
<div class="flex-container">
  <div class="flex-item" style="order: 2;">Item 1</div>
  <div class="flex-item" style="order: 1;">Item 2</div>
  <div class="flex-item" style="order: 3;">Item 3</div>
</div>

<style>
  .flex-container {
    display: flex;
    flex-direction: row;
  }
  .flex-item {
    flex: 1;
  }
</style>

In this example, the `order` property is used to change the visual order of the flex items. Although `Item 1` is the first element in the HTML, it will appear second due to `order: 2`. Similarly, `Item 2` will appear first (`order: 1`), and `Item 3` will appear last (`order: 3`).

The Flexbox model, when applied by setting the `display` property to `flex` on a parent element, offers a robust and versatile method for designing web layouts. It provides a wide range of properties that allow developers to control the alignment, direction, order, and size of flex items within a container, enabling the creation of complex and responsive layouts with ease. By understanding and utilizing these properties, developers can achieve precise control over the layout behavior of their web pages, ensuring that content is displayed in an optimal and visually appealing manner across different devices and screen sizes.

Other recent questions and answers regarding EITC/WD/WFF Webflow Fundamentals:

View more questions and answers in EITC/WD/WFF Webflow Fundamentals

More questions and answers:

Tagged under: , , , , ,