{"componentChunkName":"component---src-templates-post-js","path":"/blog/align-self","result":{"data":{"markdownRemark":{"html":"

I have talked about justify-content, align-items and align-content to align flex-items. All of them are a property of container and applies for every flex-item inside the container. align-self comes into play when we want to align only one flex-item at a time.

\n

I am going to use below code sample to explain the working of align-self.

\n
<div class=\"container\">\n    <div class=\"box box1\">1</div>\n    <div class=\"box box2\">2</div>\n    <div class=\"box box3\">3</div>\n    <div class=\"box box4\">4</div>\n    <div class=\"box box5\">5</div>\n    <div class=\"box box6\">6</div>\n</div>
\n
.box {\n  color: white;\n  font-size: 100px;\n  text-align: center;\n  text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);\n  padding: 10px;\n}\n\n/* Colours for each box */\n.box1 {\n  background: #1abc9c;\n}\n.box2 {\n  background: #3498db;\n}\n.box3 {\n  background: #9b59b6;\n}\n.box4 {\n  background: #34495e;\n}\n.box5 {\n  background: #f1c40f;\n}\n.box6 {\n  background: #e67e22;\n}\n\n.container {\n  display: flex;\n  border: 10px solid #000000;\n  align-items: flex-start;\n  height: 100vh;\n}\n\n.box2 {\n  padding-bottom: 200px;\n}\n\n.box5 {\n  padding-top: 250px;\n}\n\n.box2 {\n  align-self: center;\n}
\n
\n \n \n \"align\n \n
Output for starter code
\n
\n

align-self is basically align-item which works for single flex-item. I have already discussed align-item here. align-self aligns the particular flex-item with respect to the cross-axis. The possible values for align-self are flex-start, flex-end, center, stretch, and baseline. I am going to apply align-self on box 5. All the outputs are given below:

\n
.box5 {\n  align-self: flex-start;\n}
\n
\n \n \n \"align\n \n
align-self: flex-start
\n
\n
.box5 {\n  align-self: flex-end;\n}
\n
\n \n \n \"align\n \n
align-self: flex-end
\n
\n
.box5 {\n  align-self: center;\n}
\n
\n \n \n \"align\n \n
align-self: center
\n
\n
.box5 {\n  align-self: stretch;\n}
\n
\n \n \n \"align\n \n
align-self: stretch
\n
\n

align-self: baseline, is supposed to align the flex-item according to the baselines of all other flex-items whose align-self is also set to baseline. So, we must need to set this property to at least two flex items to see the effect.

\n
.box5 {\n  align-self: baseline;\n}\n\n.box2 {\n  align-self: baseline;\n}
\n
\n \n \n \"align\n \n
align-self: baseline
\n
\n

This is all about align-self in Flexbox. I am taking a Flexbox course What The Flex Box by Wes Bos. It is a great free course. Be sure to check it out if you want to learn Flexbox in depth.

","timeToRead":2,"frontmatter":{"title":"What is the use of align-self in Flexbox","date":"2017-10-27T00:00:00.000Z","tags":["CSS"]}}},"pageContext":{"slug":"align-self"}},"staticQueryHashes":["3649515864","63159454"]}