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
: Appliesdisplay: 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 is0
.flex-shrink-{value}
: Controls how much a flex item will shrink relative to other items. Default is1
.flex-basis-{value}
: Defines the initial size of a flex item. Default isauto
.
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 is0
.
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-*
, andalign-content-*
to define and control flex containers. - Flex Item Utilities: Use classes like
flex-grow-*
,flex-shrink-*
,flex-basis-*
,flex-*
,align-self-*
, andorder-*
to manage individual flex items within a container.