CSS Topics
- CSS Intro
- CSS How To
- CSS Editors
- CSS Properties
- accent-color
- align-content
- align-items
- align-self
- all
- animation
- animation-delay
- animation-direction
- animation-duration
- animation-fill-mode
- animation-iteration-count
- animation-name
- animation-play-state
- animation-timing-function
- aspect-ratio
- backdrop-filter
- backface-visibility
- background
- background-attachment
- background-blend-mode
- background-clip
- background-color
- background-image
- background-origin
- background-position
- background-position-x
- background-position-y
- background-repeat
- background-size
- block-size
- border
- border-block
- border-block-color
- border-block-end
- border-block-end-color
- border-block-end-style
- border-block-end-width
- border-block-start
- border-block-start-color
- border-block-start-style
- border-block-start-width
- border-block-style
- border-block-width
- border-bottom
- border-bottom-color
- border-bottom-left-radius
- border-bottom-right-radius
- border-bottom-style
- border-bottom-width
- border-collapse
- border-color
- border-end-end-radius
- border-end-start-radius
- border-image
- border-image-outset
- border-image-repeat
- border-image-slice
- border-image-source
- border-image-width
- border-inline
- border-inline-color
- border-inline-end
- border-inline-end-color
- border-inline-end-style
- border-inline-end-width
- border-inline-start
- border-inline-start-color
- border-inline-start-style
- border-inline-start-width
- border-inline-style
- border-inline-width
- border-left
- border-left-color
- border-left-style
- border-left-width
- border-radius
- border-right
- border-right-color
- border-right-style
- border-right-width
- border-spacing
- border-start-end-radius
- border-start-start-radius
- border-style
- border-top
- border-top-color
- border-top-left-radius
- border-top-right-radius
- border-top-style
- border-top-width
- border-width
- bottom
- box-decoration-break
- box-reflect
- box-shadow
- box-sizing
- break-after
- break-before
- break-inside
- caption-side
- caret-color
- clear
- clip
- clip-path
- color
- column-count
- column-fill
- column-gap
- column-rule
- column-rule-color
- column-rule-style
- column-rule-width
- column-span
- column-width
- columns
- content
- counter-increment
- counter-reset
- counter-set
- cursor
- direction
- display
- empty-cells
- filter
- flex
- flex-basis
- flex-direction
- flex-flow
- flex-grow
- flex-shrink
- flex-wrap
- float
- font
- font-family
- font-feature-settings
- font-kerning
- font-size
- font-size-adjust
- font-stretch
- font-style
- font-variant
- font-variant-caps
- font-weight
- gap
- grid
- grid-area
- grid-auto-columns
- grid-auto-flow
- grid-auto-rows
- grid-column
- grid-column-end
- grid-column-gap
- grid-column-start
- grid-gap
- grid-row
- grid-row-end
- grid-row-gap
- grid-row-start
- grid-template
- grid-template-areas
- grid-template-columns
- grid-template-rows
- hanging-punctuation
- height
- hyphenate-character
- hyphens
- image-rendering
- inline-size
- inset
- inset-block
- inset-block-end
- inset-block-start
- inset-inline
- inset-inline-end
- inset-inline-start
- isolation
- justify-content
- justify-items
- justify-self
- left
- letter-spacing
- line-height
- list-style
- list-style-image
- list-style-position
- list-style-type
- margin
- margin-block
- margin-block-end
- margin-block-start
- margin-bottom
- margin-inline
- margin-inline-end
- margin-inline-start
- margin-left
- margin-right
- margin-top
- mask-image
- mask-mode
- mask-origin
- mask-position
- mask-repeat
- mask-size
- max-block-size
- max-height
- max-inline-size
- max-width
- min-block-size
- min-height
- min-inline-size
- min-width
- mix-blend-mode
- object-fit
- object-position
- offset
- offset-anchor
- offset-distance
- offset-path
- offset-rotate
- opacity
- order
- orphans
- outline
- outline-color
- outline-offset
- outline-style
- outline-width
- overflow
- overflow-anchor
- overflow-wrap
- overflow-x
- overflow-y
- overscroll-behavior
- overscroll-behavior-block
- overscroll-behavior-inline
- overscroll-behavior-x
- overscroll-behavior-y
- padding
- padding-block
- padding-block-end
- padding-block-start
- padding-bottom
- padding-inline
- padding-inline-end
- padding-inline-start
- padding-left
- padding-right
- padding-top
- page-break-after
- page-break-before
- page-break-inside
- paint-order
- perspective
- perspective-origin
- place-content
- place-items
- place-self
- pointer-events
- position
- quotes
- resize
- right
- rotate
- row-gap
- scale
- scroll-behavior
- scroll-margin
- scroll-margin-block
- scroll-margin-block-end
- scroll-margin-block-start
- scroll-margin-bottom
- scroll-margin-inline
- scroll-margin-inline-end
- scroll-margin-inline-start
- scroll-margin-left
- scroll-margin-right
- scroll-margin-top
- scroll-padding
- scroll-padding-block
- scroll-padding-block-end
- scroll-padding-block-start
- scroll-padding-bottom
- scroll-padding-inline
- scroll-padding-inline-end
- scroll-padding-inline-start
- scroll-padding-left
- scroll-padding-right
- scroll-padding-top
- scroll-snap-align
- scroll-snap-stop
- scroll-snap-type
- scrollbar-color
- tab-size
- table-layout
- text-align
- text-align-last
- text-decoration
- text-decoration-color
- text-decoration-line
- text-decoration-style
- text-decoration-thickness
- text-emphasis
- text-emphasis-color
- text-emphasis-position
- text-emphasis-style
- text-indent
- text-justify
- text-orientation
- text-overflow
- text-shadow
- text-transform
- text-underline-offset
- text-underline-position
- top
- transform
- transform-origin
- transform-style
- transition
- transition-delay
- transition-duration
- transition-property
- transition-timing-function
- translate
- unicode-bidi
- user-select
- vertical-align
- visibility
- white-space
- width
- windows
- word-break
- word-spacing
- word-wrap
- writing-mode
- z-index
- CSS Selectors
- CSS Comments
- CSS Length
- CSS Image Sprites
- CSS Grid Layout
- CSS Grid Flexbox
- CSS @charset Rule
- CSS @font-face Rule
- CSS @import Rule
- CSS @keyframes Rule
- CSS @media Rule
CSS align-self Property
Photo Credit to CodeToFun
๐ Introduction
The align-self
property in CSS is used to override the default alignment of a flex item along the cross axis within its flex container.
This property allows individual flex items to be aligned differently than the rest of the items within the same flex container. It provides more control over the positioning of items in a flex container, making it easier to achieve specific layouts.
๐ก Syntax
The syntax for the align-self
property is simple and can be applied to any flex item. It accepts the following values:
item {
align-self: value;
}
Here, value can be one of the predefined keywords that dictate the alignment behavior.
๐๏ธ Default Value
The default value of the align-self
property is auto, which means that the flex item will inherit the alignment value from its containerโs align-items property.
๐ Property Values
Value | Description |
---|---|
auto | Inherits the alignment from the align-items property of the flex container. |
flex-start | Aligns the flex item to the start of the cross axis. |
flex-end | Aligns the flex item to the end of the cross axis. |
center | Aligns the flex item to the center of the cross axis. |
baseline | Aligns the flex item along the baseline of the cross axis. |
stretch | Stretches the flex item to fill the container along the cross axis (default value if align-items is set to stretch). |
๐ Example
In this example, we will align a single flex item differently from the rest of the items within a flex container.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS align-self Example</title>
<style>
.container {
display: flex;
height: 200px;
background-color: lightgray;
}
.item {
background-color: coral;
width: 50px;
height: 50px;
margin: 10px;
}
.item.special {
align-self: flex-end;
}
</style>
</head>
<body>
<h1>Align-Self Property Example</h1>
<div class="container">
<div class="item"></div>
<div class="item special"></div>
<div class="item"></div>
</div>
</body>
</html>
In this example, the special class is used to override the default alignment and align the item to the end of the cross axis.
๐ฅ๏ธ Browser Compatibility
The align-self
property is widely supported across all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. However, always ensure to test your layout across different browsers to confirm consistent behavior.
๐ Conclusion
The align-self
property provides flexibility in aligning individual flex items within a flex container.
By using align-self
, you can override the containerโs default alignment for specific items, allowing for more precise control over the layout. Experiment with different values to achieve the desired alignment and enhance your flexbox-based designs.
๐จโ๐ป Join our Community:
Author
For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.
Buy me a coffee to make codetofun.com free for everyone.
Buy me a Coffee
If you have any doubts regarding this article (CSS align-self Property), please comment here. I will help you immediately.