CSS Tutorials
Tags: ,
Categories: , ,

Overview

The align-self property defines the alignment for a specified item and overrides the default vertical alignment set by the container’s align-items property.

Note

The following are basic examples. Towards the bottom of this page you’ll find a complete list of all applicable properties, where you can find more information on the properties discussed, and sometimes find more involved properties not discussed on this page.

Vertically Aligning a Flex Item

In the following, the default vertical alignment for the align-items property (stretch) is being used.

<div class="flex_container">
    <div class="div_1">Box 1</div>
    <div class="div_2">Box 2</div>
    <div class="div_3">Box 3</div>
</div>
.flex_container {
    display: flex;
    background-color: #ffbd02;
}
.flex_container > div {
    background-color: #eaeaea;
    margin: 10px;
    padding: 20px;
    font-size: 22px;
}
Box 1
Box 2
Box 3

However, if we add lines 11 through 13, we can set Box 2 to self align on the parent container’s center point.

.flex_container {
    display: flex;
    background-color: #ffbd02;
}
.flex_container > div {
    background-color: #eaeaea;
    margin: 10px;
    padding: 20px;
    font-size: 22px;
}
.div_2 {
	align-self: center;
}
Box 1
Box 2
Box 3

Flex Properties

  • CSS – align-content Property
    The align-content property modifies the behavior of the flex-wrap property by aligning multiple flex lines along the vertical axis.
  • CSS – align-items Property
    The align-items property specifies the vertical alignment for items inside the flex container. The following has three divs aligned centered on the horizontal axis.
  • CSS – align-self Property
    The align-self property specifies the alignment for the specific item inside a flexible container.
  • CSS – flex Property
    The flex property is a shorthand property for: flex-basis, flex-grow, and flex-shrink.
  • CSS – flex-basis Property
    The flex-basis property specifies the initial length of a flexible item.
  • CSS – flex-direction Property
    The flex-direction property specifies the direction of the flexible items.
  • CSS – flex-flow Property
    The flex-flow property is a shorthand property for flex-direction and flex-wrap.
  • CSS – flex-grow Property
    The flex-grow property specifies how much the item will grow relative to the rest of the flexible itemsinside the same container.
  • CSS – flex-shrink Property
    The flex-shrink property specifies how the item will shrink relative to the rest of the flexible items inside the same container.
  • CSS – flex-wrap Property
    The flex-wrap property specifies whether the flexible item should wrap or not.
  • CSS – justify-content Property
    The justify-content property aligns the flexible container’s items when the items do not use all available space on the horizontal axis.
  • CSS – order Property
    The order property specifies the order of a flexible item relative to the rest of the flexible items inside the same container.

CSS Notes:

If you like our content, and find it helpful, please consider making a small donation. Thank you!

We’d like to acknowledge that we learned a great deal of our coding from W3Schools and TutorialsPoint, borrowing heavily from their teaching process and excellent code examples. We highly recommend both sites to deepen your experience, and further your coding journey. We’re just hitting the basics here at 1SMARTchicken.