Page layout with CSS Flexbox full set

In CSS, so far, if we want to lay out the layout of the page, we will use the float properties and clear float technique to divide the website column as we want. Or if you want to be more convenient, use the CSS Grid Framework to save time. But to be honest, if you've worked with CSS often, column division is sometimes very time-consuming with this traditional technique, and using a framework makes our website more unnecessary CSS. Or if we lay out the page on current conventional techniques, then in each different device we have to balance the size quite complicatedly.

CSS3 was born as an improved version of its existing weaknesses, which includes improving the layout technique to be more flexible, simpler, and the CSS3 property we use for the layout is Flexbox .

What is Flexbox?
Flexbox is a layout mode that will scale the elements inside to display on all devices. In other words, you don't need to set the size of the element, don't let it float, just set it to display horizontally or vertically, then the elements inside can display as you like.

Currently, according to the advice from Mozilla, we use Flexbox to set up the layout on a small scale (for example, the frames in the website) and when setting the layout on a larger scale (such as dividing the website columns). should still use the usual style of grid layout.

Terminology of components in Flexbox
Before diving deeper into Flexbox, we need to understand what Flexbox is like and some related terms.

Below is a diagram of the Flexbox structure from the Mozilla Developer Network.

Source: Mozilla Developer Network

The two most important components in a Flexbox layout are the container and the item:

container : is the large element that surrounds the elements inside, you will set the display style inline (horizontal arrangement) or vertical arrangement. Then, the items inside will display based on this container's settings.
item : The child elements of the container are called items, in item you can set how many columns it will use in a container, or set its display order.
In addition to those two main components, we can see the picture above will have:

main start , main end : When setting up flexbox, the starting point of the container is called main start and the end point is called main end. This means, the items inside will be displayed from main start to main end (or are allowed to display to main end). And its perpendicular direction is cross start , cross end also has the same meaning but is always perpendicular to main start, main end.
main axis : This axis is the main axis to control the direction in which items will display. As you can see above the main axis is the vertical axis so the items will display vertically, however we can use the property flex-directionto change the axis of the main axis and then the items will display according to it. And the cross axis is always the perpendicular axis of the main axis.
main size : You can simply understand the size (width or vertical) of each item based on the main axis.
cross size : Is the size (width or vertical) of each item based on the cross axis.
Getting Started with Flexbox
First I start with a simple structure like this:

[html]

</div>

[/html]

And an initial CSS snippet to set the color and size for easy viewing of each element:

/** Global CSS **/
.container {
background: red;
max-width: 960px;
max-height: 1000px;
margin: 0 auto;
padding: 5px;
}
.item {
background: blue;
margin: 5px;
color: white;
height: 50px;
text-align: center;
line-height: 50px;
}
Now we will start working with Flexbox here. We will first bring it .containerback to the flexbox display with display: flex.

/** Flex layout **/
.container {
display: flex;
}
You will see that the items inside have displayed themselves vertically, corresponding to the default main axis which is horizontal.

If you want to change the axis just add the flex-direction property to the container. Specifically:

flex-direction: row | column | row-reverse | column-reverse
flex-direction:
row: Convert the main axis to horizontal, that is, display in rows.
colum: Convert the main axis to vertical, that is, display in columns.
row-reverse: Display in rows but reverse the position of items.
column-reverse: Display by column but reverse the position of items.

Too simple right?

flex-wrap
Now to understand this, let's try adding width to each item inside 1000px to see what happens when using flexbox.

.item {
width: 1000px;
}

As you can see, even though we have added a width for each item inside of 1000px, it still shows up on an even row. The reason is that by default, flexbox aligns displayed elements evenly along its main axis based on the width of the container. So even if you adjust the width beyond its limit, it still won't jump around.

Now try adding properties flex-wrap: wrapto the container.

.container {
display: flex;
flex-wrap: wrap;
}

In short, this property allows the container to wrap items even if the size of the item is changed, the default is nowrap. This property can be applied to both container and item verticals. Watch the video above for more details.

order
In my example HTML in this article, I have set the ordinal number for each element to be 1, 2, 3 and 4 with the respective classes .item1, .item, .item3 and .item4. By default, this item will display in order in HTML, but with the order attribute we can rearrange the order position of the items.

For example I have:

.item1 {
order: 4;
}
.item2 {
order: 3;
}
.item3 {
order: 1;
}
.item4 {
order: 2;
}

By default, the sort order will start from left to right, from top to bottom. If you re-align the main axis with the property flex-directionit will change to the opposite.

flex-grow
To do this example, first remove the wrap function and set the width of the item to 50px.

.item {
width: 50px;
}
Now in .item2, his value flex-growis 1to try offline.

.item2 {
flex-grow: 1;
}

When it's set to flex-grow to 1, it fills in the rest of the empty container. Now try for .item1the flex-grow: 2test.

.item1 {
flex-grow: 2;
}

Now the value flex-grow: 2will take a remainder twice as large of flex-grow: 1.

flex-shrink
You can understand by default all items have a value of flex-shrink1. This means that when we zoom out the browser, the elements all shrink equally. However, if I want .item3it to shrink more than other items, I will increase its value flex-shrink.

.item3 {
flex-shrink: 2;
}

flex-basis
This one you can understand most simply is to assign the item a certain size. You can use absolute or relative values (depending on the size of the container).

.item3 {
flex-basis: 500px;
}

justify-content
By default, the items inside will be evenly spread starting from main start to main end, but if the container still has space, you can use properties justify-contentto adjust its starting position.

This property has 5 values and you can see the image below borrowed from CSS Tricks to better understand the meaning of justify-content values.

flexbox-justify-content

Here is an example:

.container {
display: flex;
justify-content: flex-end;
}

In this article, I only mentioned some commonly used properties in Flexbox, you can see a list of Flexbox properties here .

Epilogue
Flexbox in CSS can be said to be one of the very good layout styles to replace the usual layout using float, suitable when pagination of small elements in the website to minimize unnecessary use of float. .

Although not all browsers support CSS Flexbox at the moment, it is certainly one of the features that browsers will soon support due to its ease of use and good customization. .

Trang chủ

WEB DEVELOPMENT

Page layout with CSS Flexbox full set

Page layout with CSS Flexbox full set