In addition to working with element flexibility, the Flex module also allows each element inside the flex container to have its location set relative to other elements. There are two properties for this, and we'll look at them both in this lesson:
- order
- align-self
To examine these properties, let's take a look at CodePen and place three elements inside the flex container. Like with previous lessons, you can change the code within CodePen, which will be of use in learning these properties.
The blocks are purposely made to have different heights so that the properties are more visible.
order
The order property is responsible for the order of the elements inside the container. This is a handy feature that allows you to, for example, move elements within a container when you open the page on different devices.
The order value can take any number that indicates the number representing the item's location on the main axis. Let's try to swap the first and third elements inside our demonstration:
It's also possible to use a negative value. In this case, there'll be no magic stuff happening, simply the elements with a negative order value will come before those with a positive order value.
It should be noted that if not every element has a order property, items lacking it will be positioned based on their position in the document.
And, as shown in the example below, elements with no order property will always be displayed first:
This behavior will only happen if the order property has positive values. Elements with a negative order value will be placed before elements without the order property. This is because flex elements all have a property value of zero by default.
The colors of elements without the order property have been made slightly darker to make sure you can see where the elements are in the code and the browser. Look closely at where the .bg-red-one, bg-green-two, and bg-blue-three blocks are located. So, if you want to be in control of where the blocks are positioned, then make sure you give all elements the order property if you need it.
align-self
The align-self property is similar in purpose to the align-items property that we discussed in one of the previous lessons. The main difference is that the align-self property doesn't apply to the whole flex container, but rather to one specific element within the container that we want to change the location of along the cross axis.
The main values of the align-self property are:
- center
- flex-start
- flex-end
- baseline
The following classes have been added to this CodePen:
- align-self-center
- align-self-start
- align-self-end
- align-self-baseline
Try changing the classes inside the container to see how the element will be positioned.
Docs
- order
- align-self
For full access to the course you need a professional subscription.
A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.
