CSS: align-self, order (for flex items)

flex

• CSS: flex (flex-grow, flex-shrink, flex-basis)

align-self

Override alignment for one item

.item949 {
 align-self: flex-start;
 /* overrides container's align-items */
}

order

• Changes visual order of a flex item without changing HTML.
• Negative values come before 0; positive after.
• Default for each item is 0.

.item949:nth-child(2) {
 /* make it appear first */
 order: -1;
}

example

<div class="xflex7562">
<div class="item949">1</div>
<div class="item949" style="order:-1">2</div>
<div class="item949">3</div>
<div class="item949">4</div>
</div>