The documentation for align-self
states:
The align-self CSS property aligns flex items of the current flex line overriding the align-items value.
However, this does not happen:
.example {
display: flex;
align-items: center;
border: 1px solid blue;
height: 8ex;
}
.example > div {
border: 1px solid red;
}
#a > div:last-child {
align-self: top;
}
#b > div:last-child {
align-self: center;
}
#c > div:last-child {
align-self: bottom;
}
12
12
12
The docs also say:
If any of the item's cross-axis margin is set to auto, then align-self is ignored. The property doesn't apply to block-level boxes, or to table cells.
However, none of these things work:
- Explicitly adding
margin:0
to the childdiv
s. - Adding
display:inline
to the childdiv
s. - Changing the
div
s tospan
s.
Why is align-self
not working?
Answer
top
and bottom
are not valid values for align-self
. Use flex-start
and flex-end
instead:
.example {
display: flex;
align-items: center;
border: 1px solid blue;
height: 8ex;
}
.example > div {
border: 1px solid red;
}
#a > div:last-child {
align-self: flex-start;
}
#b > div:last-child {
align-self: center;
}
#c > div:last-child {
align-self: flex-end;
}
12
12
12
No comments:
Post a Comment