Escuche esta historia
--:--
8:30
Flexbox: a system to layout websites in a simple way
Web layout has changed a lot in recent years and tools have appeared that greatly facilitate the work. Previously, developers used to resort to tables to be able to layout a website.
Although this is something that worked, the truth is that it was quite limited, especially since it did not have any dynamism. Then the developers started working with floats and divs, which made it possible to do a lot of things.
However, today there are two new alternatives, the Grid and Flexbox, which allow you to have dynamic blocks, ideal for responsive design. Today we will talk a little more about what this tool is and how it works.
What is flex box?
It is simply a CSS - based system that allows you to generate flexible elements. This is a much more powerful and cleaner new mechanic than floats. With flexbox you can get to do real wonders and it is a really simple way.
This allows the creation of elements in a single dimension and greatly facilitates the work of laying out a website. With this system, the size of a website is able to dynamically adapt to the width and height of a website.
Flexbox Basics
In order to handle flexbox properly, it is very important to understand what the basic elements that make it up are. The 4 basic concepts to handle this functionality are the following:
Container
The container is the main element of any flexbox, it acts as the parent element and inside it are the items. The container is the element that will receive the properties and that will be applied to the children, that is, to the items.
Principal axis
The main axis serves to define the orientation of the container, it is handled horizontally. If we compare it with a Cartesian plane, this would be the X.
Secondary axis
The secondary axis is the opposite, i.e. it is the orientation of that container vertically. Following the same example as before, in the Cartesian plane this would be the Y.
items
The items are those elements that are inside the container. All of these are children of the parent element and are placed as specified in the container.
An item can be any element, a div, a paragraph, a label, a spam or anything else.
How is a flex block initialized?
To get started with flexbox, the first thing you need to do is apply the “display” property to the element. When applying it, you will be able to specify the value of: “flex”. The code would be as follows:
.container { display: flex; }
With this, the container becomes a flebox and you can start applying different properties.
What are the main properties that can be applied to a flexible block?
There are several properties that can be applied to flexboxes to give them their appearance or define their size and orientation. Next I will tell you which are the most common.
Flex-direction
This property is the one that allows to change the direction in the main axis, that is, horizontally and it can have the following values:
row : This is the default orientation and causes elements to be positioned horizontally from left to right.
row-reverse : This allows you to orient the flexbox horizontally, but from right to left. That is, it is the opposite of the normal row, the last elements appear first.
column : This value allows to position the elements of the container vertically, that is, from top to bottom.
column-reverse : It is the opposite case of column, that is, it allows to organize the elements in the vertical axis. However, the last elements will be the first, since it sorts them in reverse.
flex-wrap
This is another of the most important properties of a flexbox and what it allows is to indicate to the container whether the content will be placed on a single line or multiline. Among the values that this property can have, we have the following:
nowrap : This is the default value of flex wrap and is characterized by aligning all the content on a single line. When an element does not fit in the container, it will be pushed out of the container.
wrap : With the value of wrap, the content of the container becomes multiline. That is, it overflows down when it no longer has space horizontally.
wrap-reverse : This value causes the content to wrap in multi-line mode, but in reverse. That is, the newest items are placed in front and the oldest are overflowing down.
flex-flow
This is a property that works as a shortcut and in which flex-direction and flex-wrap are combined. To use it, the following syntax is used.
.container { flex-flow: <direction> <wrap>; }
This way, the first value is set to one of the flex-direction values, followed by the flex-wrap value. It works the same way, only this is a shorthand, since instead of using two lines, only one is used.
Justify-content
With this property it is possible to align the content inside the container horizontally. That is, on the main axis and has the following values:
flex-start : Align items to the start of the container.
flex-end : Align items to the end of the container.
center : Allows to center the items with respect to the container.
space-between : It is in charge of distributing the items in such a way that it separates them maximizing the space between them (it does not leave space on the edges).
space-around : Distribute the items leaving the same space between them, including in the surroundings.
space-evenly : Does the same as space-around, but overlaps them left and right.
align-content
With this property you can align the content that is inside the container in the secondary (vertical) axis. This handles the same properties as justify-content, but adds a new one that is as follows:
stretch : Allows to stretch the items so that they occupy the entire space of the container (from top to bottom)
align-self
This also allows you to modify the behavior and alignment of each of the items separately on the secondary (vertical) axis. Additionally, it has the same values, except that in this case two new ones are added, which are the following:
baseline : Allows to align the items according to the base of the rest.
auto : This is the default property and inherits the values from the parent.
Align-items
This is a very similar property to align-content, but they have a few key differences. In align-items it acts on the current line, that is, in containers that only handle one line. For its part, align-content has no effect on single-line containers.
gap
This is a new property that allows you to set the size of the spaces between items. That is, it handles sizes dynamically without the need to use margin or padding. This has two main properties that are the following:
row-gap : With this you can define the space that will be between the rows. This requires that the flex-direction: common property has been applied.
column-gap : With this property it is possible to determine the space between the columns when a flex-direction: row has been set.
Because it is a fairly new property, it is possible that it can cause some problems in older browsers.
Order
This is a very useful property and it is used to be able to modify the order of each one of the items inside the container. By default, the order that is added to the items is 0. That is, they are located depending on how they have been placed in the HTML.
It is a very simple property and, the lower the number they have, they will be placed first. That is, if all the items are by default (order: 0) and you add -1 to any of them, it will be placed first.
The syntax for this is as follows:
.item1 { order: 1; }
For this property to take effect, the item must be inside a flex container.
