Cascading Style Sheets (CSS) allow you to design your web pages properly. While HTML offers only the most important basic elements, CSS can implement complex web design: embed images appropriately, organize text, or embed elements so that they stand out on the web page. This useful markup language is constantly being developed to simplify working with web pages and provide professionals with new design options. Another such model is CSS Flexbox: an important tool for designing the web pages that are needed in the mobile age..
One of the main functions of the Cascading Style Sheet or CSS is to layout all the elements of the web page: the text, the images and the buttons can be arranged in detail, determining where each element should appear on the screen to the fullest. minimum pixel. However, this is only possible if the screen size and its aspect ratio are known. In the age of the mobile Internet , with its wide variety of options in this regard (smartphones tend to change orientation when tilted), it is not possible to achieve a convincing result with the typical rigid boxes of CSS.
The flexbox (more specifically, CSS Flexible Box Layout or CSS flexible box layout) works smarter and more dynamically: the layout adapts flexibly to the screen where it is displayed, following the concept of responsive layout. The space is filled or the elements are moved so that everything remains visible. To achieve this without completely dismantling the design, flexbox works with two axes : the main axis, which is usually horizontal, and the transverse or vertical axis. Through these axes, the elements are organized within the box and distributed in relation to each other. Once this is done, CSS Flexbox just has to ensure that the space around these elements is filled correctly..
Anyone who is dedicated to designing web pages today should learn to use CSS Flexbox, because this technology makes working with variable screen sizes much easier and, thanks to its structure, it allows to achieve very attractive results with just a few lines of code.
Another innovation that was introduced with CSS3 is called CSS Grid, a technology that offers web designers other ways to distribute objects on the screen..
Flexbox is based on a flexible container ( flex container ), which in turn contains several flexible items ( flex items ). The container gives its properties to the elements, that is: the elements or flexboxes owe their flexibility to being inside the container.
Each of the two axes follows a direction: usually the main axis goes from left to right, while the transverse axis goes from top to bottom. Flexbox is described as a one-dimensional system - items can be arranged in rows or columns, and it is never intended to combine both. For example, if you decide on the arrangement in rows (the standard of this technology), CSS Flexbox will try to organize all the elements in a single row, although it is also possible to avoid this and force a line break.
In the following example, we write the CSS code directly in the header ( <head> ) of the HTML document. Instead, you can also create your own stylesheet file and insert it into the header.
Before you start organizing your items, you need to create them first. The way to do it is via HTML, as usual:
<!DOCTYPE html> <html> <head> </head> <body> <div> <div>Box 1</div> <div>Box 2</div> <div>Box 3</div> </div> </body> </html>
The three items would simply be displayed one below the other. Now, we use CSS to distribute them on the main axis:
<style> .flex-container { display: flex; background-color: grey; } .flex-item { background-color: white; width: 200px; margin: 10px; text-align: center; line-height: 100px; font-size: 50px; } </style>
In this stylesheet, the container has been defined. The display: flex property enables the flexbox. The elements are distributed from left to right, since we have not defined it otherwise. It is also possible to do it through five different options, configurable with the justify-content command :
The rest of the code up to this point is aesthetic only and has nothing to do with the flex boxes themselves.
The CSS Flexbox model starts from horizontal alignment, although it is also possible to arrange elements in a column. In addition, the direction can be reversed, from left to right or from bottom to top. To do this, the flex-direction command is used :
The justify-content: flex-end command is not the same as flex-direction: row-reverse . While in the first one wraps the last element to the right edge, in the second, the order is completely changed, which means that the first element of the code appears on the right edge.
Until now, we have placed the flex boxes evenly. However, in web design, we do not always want all elements to be distributed equally. For example, sometimes we want text to display differently than an image. To achieve this, we can group the elements in the HTML text:
<div> <div>Box 1</div> <div> <div>Box 2</div> <div>Box 3</div> </div> </div>
With justify-content , items can be distributed with a certain relationship to each other on the horizontal axis. Instead, if you want the content to be displayed from top to bottom (on the cross axis), you will need the align-items command . In this case, there are also five different options:
At first glance, the flex-start and baseline options seem to give the same results, but they present a difference that is especially evident when the objects are nested: whereas flex-start only links two flexboxes that are at the same hierarchical level, baseline it also takes into account the content in the boxes.
With the following code, three objects of different sizes can be centered next to each other:
<!DOCTYPE html> <html> <head> <style> .flex-container { display: flex; background-color: grey; justify-content: center; align-items: center; } .flex-item1 { background-color: white; width: 200px; margin: 10px; text-align: center; line-height: 100px; font-size: 50px; } .flex-item2 { background-color: blue; width: auto; margin: 10px; text-align: center; line-height: 100px; font-size: 50px; } .flex-item3 { background-color: grey; width: 200px; margin: 10px; text-align: center; line-height: 100px; font-size: 50px; </style> </head> <body> <div> <div>Box 1</div> <div> <div>Box a</div> <div>Box b</div> </div> <div>Box 2</div> </div> </body> </html>
The vertical layout can also be modified by line breaks. If you put many objects in a container, they would simply still be displayed in landscape format, so that the user would have to scroll and exit the screen area to see them. With flex-wrap , you make sure that the elements are arranged neatly over multiple lines.
.flex-container { display: flex; background-color: grey; justify-content: center; align-items: center; flex-wrap: wrap-reverse; }
Until now, the layout has always been applied to the entire container, so that all boxes included within it follow the general commands. This makes work easier, but at the same time also limits it. For this reason, CSS Flexbox offers web designers the opportunity to define exceptions. To do this, the order command is used . The default value (if the user does not define another) is 0. The value adds the object to an abstract group: all the elements that we have created so far belong to the same group, because they all have the value 0. Starting from this value, now you can move each object forward (-1) or backward (1).
If you leave all the elements in value 0 except one to which you give the value 1, this object will be shown after the rest of the elements. The object can also be moved by assigning it other values (higher or lower). Please note that this is a purely visual representation : the logical sequence according to the HTML document does not change.
<!DOCTYPE html> <html> <head> <style> .flex-container { display: flex; background-color: grey; justify-content: center; align-items: center; flex-direction: row; } .flex-item1 { background-color: white; width: 200px; margin: 10px; text-align: center; line-height: 100px; font-size: 50px; } .flex-item2 { background-color: white; width: 200px; margin: 10px; text-align: center; line-height: 100px; font-size: 50px; order: -1; } </style> </head> <body> <div> <div>Box 1</div> <div>Box 2 </div> <div>Box 3</div> </div> </body> </html>
So far we have only talked about the flexible arrangement of objects. In all cases, the size relationships have been established using classic CSS in the sample code. However, flexboxes can also be sized. To do this, the flex command is used . Similar to order, items can be divided into groups; the higher the value, the more space the item takes up.
.flex-container { display: flex; background-color: grey; justify-content: center; align-items: center; flex-direction: row; } .flex-item1 { background-color: white; width: 200px; margin: 10px; text-align: center; line-height: 100px; font-size: 50px; } .flex-item2 { background-color: white; width: 200px; margin: 10px; text-align: center; line-height: 100px; font-size: 50px; flex: 1; }
In fact, flex is a shortened form of the command, containing three statements: flex-grow , flex-shrink, and flex-basis . So you can enter the individual values directly in abbreviated form ( flex: <flex-grow> <flex-shrink> <flex-basis> / flex: 1 1 20em ) or set a single value and let CSS do the configuration .
Using CSS Flexbox can save us a lot of work. From the outset, flex boxes are automatically laid out on the page, although CSS leaves a lot of leeway for the web designer to modify and adapt the layout.