CSS align-self Property

Description

The align-self property sets alignment of individual row elements inside a flex container, or aligns a grid layout element inside a cell along the axis of a grid container column.

Initial value
auto
Applies to
Flex items, grid items, and absolutely-positioned boxes
Inherited
No
Media
Visual
Computed value
Specified value
Animatable
No
CSS Version
CSS3
JavaScript syntax
object.style.alignSelf

Syntax

align-self: auto | flex-start | flex-end | center | baseline | stretch

Values

  • autoTakes the parent value of align-items or stretch if there is no parent.
  • flex-startThe element is aligned at the beginning of the transverse axis of the container.
  • flex-endThe element is aligned at the end of the transverse axis of the container.
  • centerThe element is aligned in the center line on the transverse axis.
  • baselineThe element is aligned with the baseline of the text.
  • stretchThe element is stretched in such a way as to occupy the entire free space of the container along the transverse axis.

Example

<div class="flex-container"> 
<div class="flex-item item1">Fenech is a fox living in the deserts of North Africa. It has a fairly miniature size and a peculiar appearance with large ears.</div>
<div class="flex-item item2">Korsak - a predatory mammal of the genus foxes.</div>
<div class="flex-item item3">Fox - a predatory mammal of the canine family, the most common and largest species of the genus foxes.</div>
</div>
.flex-container { 
   display: flex; 
   align-items: flex-start; 
   height: 160px;
} 
.flex-item { 
   margin-left: 1rem;
   padding: 10px;
   width: 33.333%;
} 
.flex-item:first-child { 
   margin-left: 0; 
} 
.flex-item:hover { 
   align-self: stretch; 
} 
.item1 { 
   background: #F0BA7D; 
} 
.item2 { 
   background: #CAE2AA; 
} 
.item3 { 
   background: #A6C0C9; 
}

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
1112362012.19
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
37362012.193.0

Last updated by CSSPortal on: 4th November 2019


CSS Properties

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
backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-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-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-shadow
box-sizing
break-after
break-before
break-inside
caption-side
caret-color
clear
clip-path
color
column-count
column-fill
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-language-override
font-size
font-size-adjust
font-stretch
font-style
font-synthesis
font-variant
font-variant-alternates
font-variant-caps
font-variant-east-asian
font-variant-ligatures
font-variant-numeric
font-variant-position
font-weight
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
hyphens
image-orientation
justify-content
justify-items
justify-self
left
letter-spacing
line-break
line-height
list-style
list-style-image
list-style-position
list-style-type
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
min-height
min-width
mix-blend-mode
object-fit
object-position
opacity
order
orphans
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-wrap
overflow-x
overflow-y
padding
padding-bottom
padding-left
padding-right
padding-top
perspective
perspective-origin
place-content
place-items
place-self
position
quotes
resize
right
shape-image-threshold
shape-margin
shape-outside
tab-size
table-layout
text-align
text-align-last
text-combine-upright
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
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-position
top
transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function
unicode-bidi
vertical-align
visibility
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index