- CSS Tutorial
- CSS - Home
- CSS - Introduction
- CSS - Syntax
- CSS - Selectors
- CSS - Inclusion
- CSS - Measurement Units
- CSS - Colors
- CSS - Backgrounds
- CSS - Fonts
- CSS - Text
- CSS - Images
- CSS - Links
- CSS - Tables
- CSS - Borders
- CSS - Border Block
- CSS - Border Inline
- CSS - Margins
- CSS - Lists
- CSS - Padding
- CSS - Cursor
- CSS - Outlines
- CSS - Dimension
- CSS - Scrollbars
- CSS - Inline Block
- CSS - Dropdowns
- CSS - Visibility
- CSS - Overflow
- CSS - Clearfix
- CSS - Float
- CSS - Arrows
- CSS - Resize
- CSS - Quotes
- CSS - Order
- CSS - Position
- CSS - Hyphens
- CSS - Hover
- CSS - Display
- CSS - Focus
- CSS - Zoom
- CSS - Translate
- CSS - Height
- CSS - Hyphenate Character
- CSS - Width
- CSS - Opacity
- CSS - Z-Index
- CSS - Bottom
- CSS - Navbar
- CSS - Overlay
- CSS - Forms
- CSS - Align
- CSS - Icons
- CSS - Image Gallery
- CSS - Comments
- CSS - Loaders
- CSS - Attr Selectors
- CSS - Combinators
- CSS - Root
- CSS - Box Model
- CSS - Counters
- CSS - Clip
- CSS - Writing Mode
- CSS - Unicode-bidi
- CSS - min-content
- CSS - All
- CSS - Inset
- CSS - Isolation
- CSS - Overscroll
- CSS - Justify Items
- CSS - Justify Self
- CSS - Tab Size
- CSS - Pointer Events
- CSS - Place Content
- CSS - Place Items
- CSS - Place Self
- CSS - Max Block Size
- CSS - Min Block Size
- CSS - Mix Blend Mode
- CSS - Max Inline Size
- CSS - Min Inline Size
- CSS - Offset
- CSS - Accent Color
- CSS - User Select
- CSS Advanced
- CSS - Grid
- CSS - Grid Layout
- CSS - Flexbox
- CSS - Visibility
- CSS - Positioning
- CSS - Layers
- CSS - Pseudo Classes
- CSS - Pseudo Elements
- CSS - @ Rules
- CSS - Text Effects
- CSS - Paged Media
- CSS - Printing
- CSS - Layouts
- CSS - Validations
- CSS - Image Sprites
- CSS - Important
- CSS - Data Types
- CSS3 Tutorial
- CSS3 - Tutorial
- CSS - Rounded Corner
- CSS - Border Images
- CSS - Multi Background
- CSS - Color
- CSS - Gradients
- CSS - Box Shadow
- CSS - Box Decoration Break
- CSS - Caret Color
- CSS - Text Shadow
- CSS - Text
- CSS - 2d transform
- CSS - 3d transform
- CSS - Transition
- CSS - Animation
- CSS - Multi columns
- CSS - Box Sizing
- CSS - Tooltips
- CSS - Buttons
- CSS - Pagination
- CSS - Variables
- CSS - Media Queries
- CSS - Functions
- CSS - Math Functions
- CSS - Masking
- CSS - Shapes
- CSS - Style Images
- CSS - Specificity
- CSS - Custom Properties
- CSS Responsive
- CSS RWD - Introduction
- CSS RWD - Viewport
- CSS RWD - Grid View
- CSS RWD - Media Queries
- CSS RWD - Images
- CSS RWD - Videos
- CSS RWD - Frameworks
- CSS References
- CSS - Questions and Answers
- CSS - Quick Guide
- CSS - References
- CSS - Color References
- CSS - Web browser References
- CSS - Web safe fonts
- CSS - Units
- CSS - Animation
- CSS Resources
- CSS - Useful Resources
- CSS - Discussion
CSS - align-self Property
The align-self property in CSS is used to control the alignment of an individual item within a container that is using a flexbox or grid layout. While align-items is used to set the default alignment for all items in a container, align-self allows you to override that alignment for a specific item.
The items are aligned on the cross-axis in flexbox, whereas in a grid, the property aligns the items inside the grid area.
The align-self property does not apply on block-level boxes, or to table cells. In case the flexbox item's cross-axis margin is set as auto, then align-self value is ignored.
Possible Values
The align-self property can have following values:
auto: Aligns the item based on the parent's align-items value.
normal: Based on the layout mode, the effect of normal keyword changes:
Behaves like start on replaced absolutely-positioned boxes, and as stretch in all other absolutely-positioned boxes, when the layout is absolutely-positioned.
Behaves like stretch in static position of absolutely-positioned layouts.
Behaves like stretch for flex items.
Behaves similar to stretch for grid items, except for the boxes which have an aspect ratio or an intrinsic size where it behaves like start.
Does not apply to block-level boxes , and to the table cells.
flex-start: Aligns the cross-start margin edge of the flex item with the cross-start edge of the line.
flex-end: Aligns the cross-end margin edge of the flex item with the cross-end edge of the line.
center: Margins of flex-item box is centered within the line on the cross-axis. When the cross-size of an element is larger than the container, the content overflows equally in both directions.
self-start: Items are aligned to the edge of the alignment container corresponding to the start side of the item, in the cross-axis.
self-end: Items are aligned to the edge of the alignment container corresponding to the end side of the item, in the cross-axis.
baseline, first baseline, last baseline:
First baseline, and last baseline are synonym to baseline. First and last refer to the line boxes within the flex items.
These values specify the involvment of first- or last-baseline alignment in the alignment of the content.
start is the fallback alignment for first-baseline and end for last-baseline.
stretch: When the combined size of the items along with the cross-axis is less than the size of the container, and the item is sized as auto, its size is increased equally, maintaining the values of max-height / max-width.
safe: When the item overflows the container, the alignment is set as per the start value.
unsafe: Irrespective of the size of the item and the alignment container, the specified alignment value is honored.
Applies to
Flex items, grid items, and absolutely-positioned boxes
Syntax
Keyword Values
align-self: auto; align-self: normal;
Positional Alignment
align-self: center; align-self: start; align-self: end; align-self: self-start; align-self: self-end; align-self: flex-start; align-self: flex-end;
Baseline Alignment
align-self: baseline; align-self: first baseline; align-self: last baseline; align-self: stretch;
CSS align-self - auto Value
The following example demonstrates that align-self: auto property places the third flex item to their intial position inside the flex container −
<html> <head> <style> .flex_container { display: flex; align-items: center; background-color: green; height: 300px; } .flex_container div { background-color: yellow; padding: 10px; margin: 5px; height: 50px; } .flex-item { align-self: auto; } </style> </head> <body> <div class="flex_container"> <div>Flex item 1</div> <div>Flex item 2</div> <div class="flex-item">Flex item 3</div> <div>Flex item 4</div> <div>Flex item 5</div> </div> </body> </html>
CSS align-self - start Value
The following example demonstrates that align-self: start property places the third flex item to the start of the cross axis of a flex container −
<html> <head> <style> .flex_container { display: flex; align-items: center; background-color: green; height: 300px; } .flex_container div { background-color: yellow; padding: 10px; margin: 5px; height: 50px; } .flex-item { align-self: start; } </style> </head> <body> <div class="flex_container"> <div>Flex item 1</div> <div>Flex item 2</div> <div class="flex-item">Flex item 3</div> <div>Flex item 4</div> <div>Flex item 5</div> </div> </body> </html>
CSS align-self - end Value
The following example demonstrates that align-self: end property places the third flex item to the end of the cross axis of a flex container −
<html> <head> <style> .flex_container { display: flex; align-items: center; background-color: green; height: 300px; } .flex_container div { background-color: yellow; padding: 10px; margin: 5px; height: 50px; } .flex-item { align-self: end; } </style> </head> <body> <div class="flex_container"> <div>Flex item 1</div> <div>Flex item 2</div> <div class="flex-item">Flex item 3</div> <div>Flex item 4</div> <div>Flex item 5</div> </div> </body> </html>
CSS align-self - center Value
The following example demonstrates that align-self: end property places the third flex item at the center of the cross axis of a flex container −
<html> <head> <style> .flex_container { display: flex; background-color: green; height: 300px; } .flex_container div { background-color: yellow; padding: 10px; margin: 5px; height: 50px; } .flex-item { align-self: center; } </style> </head> <body> <div class="flex_container"> <div>Flex item 1</div> <div>Flex item 2</div> <div class="flex-item">Flex item 3</div> <div>Flex item 4</div> <div>Flex item 5</div> </div> </body> </html>
CSS align-self - flex-start Value
The following example demonstrates that align-self: flex-start property places the third flex item to the start of the cross axis of a flex container −
<html> <head> <style> .flex_container { display: flex; align-items: center; background-color: green; height: 300px; } .flex_container div { background-color: yellow; padding: 10px; margin: 5px; height: 50px; } .flex-item { align-self: flex-start; } </style> </head> <body> <div class="flex_container"> <div>Flex item 1</div> <div>Flex item 2</div> <div class="flex-item">Flex item 3</div> <div>Flex item 4</div> <div>Flex item 5</div> </div> </body> </html>
CSS align-self - flex-end Value
The following example demonstrates that align-self: flex-end property places the third flex item to the end of the cross axis of a flex container −
<html> <head> <style> .flex_container { display: flex; align-items: center; background-color: green; height: 300px; } .flex_container div { background-color: yellow; padding: 10px; margin: 5px; height: 50px; } .flex-item { align-self: flex-end; } </style> </head> <body> <div class="flex_container"> <div>Flex item 1</div> <div>Flex item 2</div> <div class="flex-item">Flex item 3</div> <div>Flex item 4</div> <div>Flex item 5</div> </div> </body> </html>
CSS align-self - self-start Value
The following example demonstrates that align-self: self-start property aligns the third flex item at the start of the flex container −
<html> <head> <style> .flex_container { display: flex; align-items: center; background-color: green; height: 300px; } .flex_container div { background-color: yellow; padding: 10px; margin: 5px; height: 50px; } .flex-item { align-self: self-start; } </style> </head> <body> <div class="flex_container"> <div>Flex item 1</div> <div>Flex item 2</div> <div class="flex-item">Flex item 3</div> <div>Flex item 4</div> <div>Flex item 5</div> </div> </body> </html>
CSS align-self - self-end Value
The following example demonstrates that align-self: self-end property aligns the third flex item at the end of the flex container −
<html> <head> <style> .flex_container { display: flex; align-items: center; background-color: green; height: 300px; } .flex_container div { background-color: yellow; padding: 10px; margin: 5px; height: 50px; } .flex-item { align-self: self-end; } </style> </head> <body> <div class="flex_container"> <div>Flex item 1</div> <div>Flex item 2</div> <div class="flex-item">Flex item 3</div> <div>Flex item 4</div> <div>Flex item 5</div> </div> </body> </html>
CSS align-self - baseline Value
The following example demonstrates that align-self: baseline property aligns the third flex item along their baseline −
<html> <head> <style> .flex_container { display: flex; align-items: center; background-color: green; height: 300px; } .flex_container div { background-color: yellow; padding: 10px; margin: 5px; height: 50px; } .flex-item { align-self: baseline; } </style> </head> <body> <div class="flex_container"> <div>Flex item 1</div> <div>Flex item 2</div> <div class="flex-item">Flex item 3</div> <div>Flex item 4</div> <div>Flex item 5</div> </div> </body> </html>
CSS align-self - stretch Value
The following example demonstrates that align-self: stretch property stretch the flex item vertically to fill the available space of the flex container −
<html> <head> <style> .flex-container { display: flex; background-color: green; height: 350px; flex-wrap: wrap; align-self: stretch; } .flex-container div { background-color: yellow; padding: 10px; margin: 5px; width: 90px; } </style> </head> <body> <div class="flex-container"> <div>Flex item 1</div> <div>Flex item 2</div> <div>Flex item 3</div> <div>Flex item 4</div> </div> </body> </html>
To Continue Learning Please Login
Login with Google