Bootstrap 5 Flex Align Self
Last Updated :
15 Dec, 2022
Bootstrap5 Flex Align Self property is used to change each item’s alignment individually on the cross-axis. By default, it starts from the y-axis, if we want to change the alignment on the x-axis change the value of the class flex-direction to the column. There are some classes that can be used to set the alignment.
Flex Align Self class:
- align-self-*-**: This class is specifically used on the flexbox items, in order to change their alignment on the cross-axis individually, by specifying the various available options with the align-self class.
Syntax:
<div class="align-self-*-**">
...
</div>
The ** can be replaced by start/end/baseline/stretch where,
- start: It denotes the item is placed on the cross start line.
- end: It denotes item is placed on the cross-end line.
- center: It denotes item is placed on the center of cross-axis.
- baseline: It denotes that items are aligned as their baselines are aligned.
- stretch: It denotes that the item will be stretched to fill the container with respect to max-height & max-width.
The ‘*‘ can be replaced by sm/md/lg/xl/xxl for making the content responsive to different screen sizes and the ‘**‘ can be replaced with the above-mentioned Flex Align Self classes.
Example 1: In this example, the flex-direction is set to row. Hence, the main axis is the X axis and the cross axis is the Y axis. As a result, the flex items will be aligned with respect to the cross-axis when an align-self property is set.
HTML
<!DOCTYPE html>
< html >
< head >
< link href =
rel = "stylesheet"
integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin = "anonymous" />
< title >Bootstrap 5 Flex - Align Self</ title >
</ head >
< body >
< center class = "m-3" >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< strong >
Flex Align Self
</ strong >
</ center >
< p class = "text-center" >
Main Axis - < b >X axis</ b > , Cross Axis - < b >Y axis</ b >
</ p >
< div style = "height: 12.5rem"
class="d-flex flex-row text-white
text-center border border-dark">
< div class="w-25 bg-success p-2
m-2 align-self-start">
align-self-start
</ div >
< div class="w-25 bg-success p-2
m-2 align-self-end">
align-self-end
</ div >
< div class="w-25 bg-success p-2
m-2 align-self-center">
align-self-center
</ div >
< div class="w-25 bg-success p-2
m-2 align-self-baseline">
align-self-baseline
</ div >
< div class="w-25 bg-success p-2
m-2 align-self-stretch">
align-self-stretch
</ div >
</ div >
</ body >
</ html >
|
Output:
Bootstrap 5 Flex Align self
Example 2: This is the example in which the flex-direction is set to the column. Hence, the main axis is the Y axis and the cross axis is the X axis. As a result, the flex items will be aligned with respect to the cross-axis when an align-self property is set.
HTML
<!DOCTYPE html>
< html >
< head >
< link href =
rel = "stylesheet"
integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin = "anonymous" />
< title >Bootstrap 5 Flex - Align Self</ title >
</ head >
< body >
< center class = "m-3" >
< h1 class = "text-success" >
GeeksforGeeks</ h1 >
< strong >
Flex Align Self
</ strong >
< br />
</ center >
< p class = "text-center" >
Main Axis - < b >Y axis</ b > , Cross Axis - < b >X axis</ b >
</ p >
< div class="d-flex flex-column text-white
text-center border border-dark">
< div class = "bg-success p-2 m-2 align-self-start" >
align-self-start
</ div >
< div class = "bg-success p-2 m-2 align-self-end" >
align-self-end
</ div >
< div class = "bg-success p-2 m-2 align-self-center" >
align-self-center
</ div >
< div class = "bg-success p-2 m-2 align-self-baseline" >
align-self-baseline
</ div >
< div class = "bg-success p-2 m-2 align-self-stretch" >
align-self-stretch
</ div >
</ div >
</ body >
</ html >
|
Output:
Bootstrap 5 Flex Align self
Reference: https://getbootstrap.com/docs/5.0/utilities/flex/#align-self
Share your thoughts in the comments
Please Login to comment...