To deal with the various flexibles properties, let's start modifying our stylesheet and our ative or
HDMI fi.
Meanwhile, it's still the media screen and let's leave only body inside the sheet.
Inside Avivi, instead, let's modify the title in box and let's insert some DVS.
Within which we will insert.
Space one.
Space to.
And space.
Three.
Obviously, by saving and refreshing, we see that our sheet now is composed only by the Eitel and the
three things inserted, one below the other.
The property we are dealing with in this lesson is Fleck's Direxion, consenting us to choose the direction
of the main axis where the various boxes will be positioned.
Therefore, if inserting the elements horizontally or vertically before everything, let's add an additional
div with a class, which in this case would be container.
Which obviously will contain our spaces, therefore, let's insert a clause in Dave at the end.
And let's align them and let's say let's move now to our stylesheet, which, as you know, is already
linked to this page.
The first thing to do would be insert in the container class.
Within which to define, first of all, display flags.
So that the system may identify the Fleck's boxes as setting to display.
After that, we will insert flex direction that for the time being.
We are setting as Khalil.
That means vertically.
Then let's move to our ATV fire and let's set a class to every single div, so espie one.
Espie to.
And Class Aspey three, let's say, and let's go back to our stylesheet at this point in our classes,
starting from Aspey one, let's define a background color.
Let's start with.
Black for SP1, one unlet said 14 pixel font size.
Two hundred pixel width and let's place a ten piece of padding.
Let's go to our ASPEY one, creating ESP two and SB three.
Well, we will modify only the background color.
Therefore, red and therefore blue.
After saving, let's refresh and see the result.
As you see inside our container.
In the car alone, the three days we created.
I've been 32.
Obviously, we can also choose to insert them horizontally, therefore here as well, we would just
need to insert a row, they would be displayed one beside the other.
There are also the column reverse function and role reverse function, which obviously we make as B
three appear first and spe one last order for role reversal.
The procedure is the same.
As you see, therefore, we have used the first function of our patterned container inside the Fleck's
boxes to sort what was inserted inside Ative.
Really easily.
Without having to define additional details, to make our lives appear in the correct way, one below
the other or else one beside the other.
Therefore, let's go back now to our Cullom view.
That's also third black instead of green, so that in the next lesson, there may be less problems in
identifying the texts and inside container.
Instead, we will insert white.
Now, let's save refresh and we have our flex box perfectly visible now we can step onto the flex wraps.