Center flex items while positioning one in corner

Question

I've started to experiment with flexbox lately, but still can't wrap my head around some things.

I am trying to create a simple layout with three flex items (children). The container is set to flex-direction: column and all the flex items are centered horizontally and vertically.

I would like one of the flex items to be positioned at the top left corner. Basically like I am using position: absolute with top: 30px; left: 30px;.

I know that align-self is used to override styles for each flex item, but I can't get it to work.

Here is the fiddle

For answers on this site that you find useful, [consider an upvote](http://stackoverflow.com/help/someone-answers). There's no obligation. Just one way to promote quality content. — Michael Benjamin, Dec 23 '16 at 18:41

score 2 · Answer 1 · edited May 23 '17 at 12:08

You can position a flex item in a corner, while centering sibling flex items, with auto margins and an invisible flex item.

HTML (add one flex item)

<div class="flex-container">
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div><!-- invisible flex item for balance -->
</div>

CSS (relevant sections)

.flex-item:nth-of-type(1) { margin-bottom: auto; margin-right: auto; }
.flex-item:nth-of-type(2) { }
.flex-item:nth-of-type(3) { }
.flex-item:nth-of-type(4) { margin-top: auto; visibility: hidden; }

DEMO

NOTE: This centering and positioning solution will work when all flex items are equal height. If flex items vary in height (or width, when flex-direction is row), then true centering will be off and absolute positioning may be the better solution.

For an absolute positioning method, and other centering and positioning options, see this answer:

Methods for Aligning Flex Items

score 1 · Accepted Answer · answered Mar 18 '15 at 20:55

You may use pseudo element and flex & order rules: http://jsfiddle.net/49eghxna/2/

.flex-container {
    max-width:80%;
    margin: 100px auto;
    height:600px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #1E5655
}
.flex-container:before, .flex-container:after {
    content:'';
    flex:1;/* will use and share all space avalaible if no values set to others */
}
.flex-container:before {
    order:2
}
.flex-container:after {
    order:5
}
.flex-item {
    width:300px;
    height:50px;
    background-color:#fff;
}
.flex-item:nth-of-type(2) {
    background-color: #eee;
    order:3;
}
.flex-item:nth-of-type(3) {
    background-color: #FFD454;
    order:4
}
.flex-item:nth-of-type(1) {
    align-self: flex-start;
    order:0;
}

<div class="flex-container">
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
</div>

Very clever, thanks a lot. I've also found this, although it user row instead of column for direction, second example on the page (http://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/) — madebym, Mar 18 '15 at 21:20
@madebym well, you asked about flex ;) , notice that the display table works from IE8 — G-Cyrillus, Mar 18 '15 at 22:53

Center flex items while positioning one in corner

2 Answers2