Bootstrap Flexbox Container and item


Flexbox Container and Item Utilities in Bootstrap

Bootstrap's flexbox utilities simplify the layout of elements using the Flexbox layout model. Flexbox provides a way to distribute space along a single axis (row or column) and align items within a container. Bootstrap's flexbox utilities include container classes for creating flex containers and item classes for controlling the alignment and distribution of items.


1. Flex Container Utilities

Flex containers are elements that use flexbox properties to manage their children. Bootstrap provides several utilities for defining and modifying flex containers.

a. Display Flex Container

  • d-flex: Applies display: flex to an element, making it a flex container.

Example:

<div class="d-flex"> <div class="p-2">Item 1</div> <div class="p-2">Item 2</div> </div>

b. Flex Direction

Flex direction determines the direction in which flex items are laid out. You can use the following classes to set the flex direction:

  • flex-row: Default direction, laying items out horizontally.
  • flex-row-reverse: Lays items out horizontally in reverse order.
  • flex-column: Lays items out vertically.
  • flex-column-reverse: Lays items out vertically in reverse order.

Example:

<div class="d-flex flex-row"> <div class="p-2">Item 1</div> <div class="p-2">Item 2</div> </div> <div class="d-flex flex-column"> <div class="p-2">Item 1</div> <div class="p-2">Item 2</div> </div>

c. Flex Wrap

Flex wrap controls whether flex items should wrap onto multiple lines:

  • flex-nowrap: Prevents wrapping.
  • flex-wrap: Allows wrapping.
  • flex-wrap-reverse: Allows wrapping in reverse order.

Example:

<div class="d-flex flex-wrap"> <div class="p-2">Item 1</div> <div class="p-2">Item 2</div> <div class="p-2">Item 3</div> </div>

d. Justify Content

Justify content controls the alignment of flex items along the main axis:

  • justify-content-start: Aligns items to the start of the container.
  • justify-content-end: Aligns items to the end of the container.
  • justify-content-center: Centers items in the container.
  • justify-content-between: Distributes items with space between.
  • justify-content-around: Distributes items with space around.
  • justify-content-evenly: Distributes items with equal space between and around.

Example:

<div class="d-flex justify-content-center"> <div class="p-2">Item 1</div> <div class="p-2">Item 2</div> </div>

e. Align Items

Align items controls the alignment of flex items along the cross axis:

  • align-items-start: Aligns items to the start of the cross axis.
  • align-items-end: Aligns items to the end of the cross axis.
  • align-items-center: Centers items along the cross axis.
  • align-items-baseline: Aligns items along their baselines.
  • align-items-stretch: Stretches items to fill the container (default).

Example:

<div class="d-flex align-items-center" style="height: 200px;"> <div class="p-2">Item 1</div> <div class="p-2">Item 2</div> </div>

f. Align Content

Align content controls the alignment of flex lines within the flex container:

  • align-content-start: Aligns lines to the start of the container.
  • align-content-end: Aligns lines to the end of the container.
  • align-content-center: Centers lines in the container.
  • align-content-between: Distributes lines with space between.
  • align-content-around: Distributes lines with space around.
  • align-content-evenly: Distributes lines with equal space between and around.

Example:

<div class="d-flex flex-wrap align-content-center" style="height: 200px;"> <div class="p-2">Item 1</div> <div class="p-2">Item 2</div> <div class="p-2">Item 3</div> </div>

2. Flex Item Utilities

Flex item utilities allow you to control the size, alignment, and order of individual items within a flex container.

a. Flex Grow, Shrink, and Basis

  • flex-grow-{value}: Controls how much a flex item will grow relative to other items. Default is 0.
  • flex-shrink-{value}: Controls how much a flex item will shrink relative to other items. Default is 1.
  • flex-basis-{value}: Defines the initial size of a flex item. Default is auto.

Example:

<div class="d-flex"> <div class="p-2 flex-grow-1">Item 1</div> <div class="p-2 flex-grow-2">Item 2</div> </div>

b. Flex

The flex shorthand property combines flex-grow, flex-shrink, and flex-basis:

  • flex-{value}: Sets the flex-grow, flex-shrink, and flex-basis values for an item.

Example:

<div class="d-flex"> <div class="p-2 flex-1">Item 1</div> <div class="p-2 flex-2">Item 2</div> </div>

c. Flex Alignment

  • align-self-start: Aligns an item to the start of the cross axis.
  • align-self-end: Aligns an item to the end of the cross axis.
  • align-self-center: Centers an item along the cross axis.
  • align-self-baseline: Aligns an item along its baseline.
  • align-self-stretch: Stretches an item to fill the container.

Example:

<div class="d-flex" style="height: 200px;"> <div class="p-2 align-self-center">Item 1</div> <div class="p-2">Item 2</div> </div>

d. Order

The order property controls the order of flex items:

  • order-{value}: Sets the order of a flex item. Default is 0.

Example:

<div class="d-flex"> <div class="p-2 order-2">Item 1</div> <div class="p-2 order-1">Item 2</div> </div>

Summary of Flexbox Container and Item Utilities in Bootstrap

  • Flex Container Utilities: Use classes like d-flex, flex-row, flex-column, flex-wrap, justify-content-*, align-items-*, and align-content-* to define and control flex containers.
  • Flex Item Utilities: Use classes like flex-grow-*, flex-shrink-*, flex-basis-*, flex-*, align-self-*, and order-* to manage individual flex items within a container.