Flexbox was born to make designing layouts on websites much easier and shorter than when using floats.
So what is flexbox and how does the algorithm below work?
About Flexbox
CSS has many different types of layouts, called “layout modes” .
The default layout is “flow layout”, which can understand the elements will be arranged in turn order.
To switch the default layout to flex, you would use “display: flex;” assigned to the parent element.
CSS then understands that this parent element will have a “flex formatting context”, and will apply flex’s algorithm to its children.
Each layout algorithm is designed to help solve a specific problem.
As “flow layout” means online document creation, it is the basic layout algorithm of Microsoft Word. Titles and paragraphs as blocks are lined up vertically, while text, links and images will be inside the blocks.
So what problem will flexbox help solve?
Flexbox solves the problem of arranging a group of elements in rows or columns.
True to its name, flexbox is very flexible. It allows control and distribution of components and spacing between them.
Axes
There are two types of axes: “primary axis” and “cross axis” .
Translation is the main axis and the diagonal axis (perpendicular to the main axis).
Everything in flexbox will be based on a main axis, that’s why you can switch the layout horizontally or vertically easily.
There is only one major axis and there are many diagonal axes perpendicular to the main axis for each component.
The subcomponents will be arranged based on the two principles of these two types of axes:
– spindle : components will begin to line up in the direction of the spindle
– diagonal axis : components will stretch along the diagonal axis to fill the outer container
Specify the spindle direction with flex direction
“flex-direction” helps to determine the direction of the spindle
“flex-direction” can take the value:
– “row” : horizontal axis, direction from left to right
– “column” : vertical axis, direction from top to bottom
Alignment
“justify-content” and “align-items” are used for the parent element (container), which helps to align all the contents inside (group all child elements)
“align-self” is used for the child element, which aligns the element individually.
justify-content
“justify-content” helps to distribute components on the main axis.
Values: flex-start, flex-end, center, space-between, space-around, space-evenly
align-items
“align-items” helps to distribute elements on the diagonal axis.
Values: stretch, flex-start, center, flex-end, baseline
align-self
“align-self” is used for the child element, allowing the child element to be changed on the diagonal axis.
“align-self” has the same attribute values as “align-items” and works similarly, except that it only applies to one element.
Why are there “align-items”, “align-self” but not “justfy-content” and “justify-self”?
So why not have “justify-self”?
Content with items
As mentioned above, there is only one main shaft connecting the ingredients together, like a skewer of meat.
And with multiple cross shafts, you can imagine a pre-cut fruit plate with multiple toothpicks stuck on top of the diagonal shafts.
Thereby, it can be seen that these diagonal axes help separate components from each other, so each element can be aligned.
As for the main axis, the components are connected to each other, so if you drag a component on the main axis, other components will affect it, so there will be no “justify-self”
There are four terms:
– justify: set the position according to the main axis
– align: set the position along the diagonal axis
– content: a group of elements ranked
– items: elements are ranked independently
In short, “justify-content” is the distribution of groups of components according to the main axis and there is no “justify-self”
hypothetical size
Even though an element is assigned an extremely large width, when it is in a flexbox, its size will be adjusted to the size of its parent, not keeping the fixed width assigned.
Grow and shrink
flex-grow
By default, if the element is not the width/length of the parent element, there will be a space left.
“flex-grow: 1” makes it possible for an element to take up this remaining space. 0 is the default value.
If there are multiple flex-grow assigned elements, the remaining space will be divided among these elements based on the assigned value.
flex-shrink
Element size is too wide for the container, the elements will shrink proportionally. If you don’t want this to happen, flex-shrink can help adjust the aspect ratio of each element.
It can be seen that “flex-grow” and “flex-shrink” are quite opposite.
– “flex-grow” is the element that adds the remaining extra space of the container.
– “flex-shink” is the element with the missing space of the container being subtracted.
This also means that if there is extra space “flex-shink” is useless and if there is no space “flex-grow” is useless.
What if I don’t want the element to shrink?
When you don’t want the element to shrink, assign “flex-shink:0”, which defaults to 1.
Using min-width can also solve this problem
Min width (min width)
Sometimes when the size of the container decreases and the content inside overflows even though the default flex-shrink is 1. Why doesn’t the content shrink like I thought it would?
The problem is here:
Besides hypothetical size, there is another size that the flexbox algorithm is interested in, which is the minimum size.
The flexbox algorithm refuses to shrink the element when the element is at its minimum size, then the content will overflow no matter how big you assign flex-shink.
So how is the minimum size calculated?
For the input element, it is the default size that the browser assigns to it, if for text, the maximum length of a word.
And to solve this problem, you can redefine min-width for that element.
Gaps (gap)
Gap allows to assign distances between elements along the major axis.
Auto margin
In flexbox, margin is similar to flex-grow in that it takes the remaining space of the container, but flex-grow takes the space for the content and margin takes the space for the margin (the distance between it and the other elements). other element).
This is useful when you want to keep the element content intact but change the space around it.
margin left and right auto will help the element to come out in the middle of the remaining space.
A common example is the page header with the logo on the left and the navigation on the right, you can use margin-right: auto for the logo and you’re done.
flex-wrap
Finally, let’s talk about layout on a row or a column.
If you want the elements to be able to jump to the second row when the container size gets smaller, you can use
“flex-wrap: wrap”
Then the element will not shrink when the size is reduced more than its hypothetical size.
This means that with flexbox and flex-wrap you can completely do a two-dimensional layout similar to grid.
But in that case, how would a story with only one main axis be understood?
With flex-wrap: wrap, each row/column will be interpreted as a separate flex environment, a separate container, i.e. there will be multiple containers and each of these containers will have its own spindle.
And these containers are inside a larger outer container (the parent element where flex-wrap:wrap is assigned)
In short with flex-wrap there will be:
– multiple rows/columns
– for each row/column, flex-items will help to lay out the element on that row/column
– these rows/columns remain in the parent container, and are grouped together
– and to layout all the content of these rows relative to the parent container, it will be necessary to use “align-content”
So you have finished learning about flexbox with me.
You may also find it strange that there is no graphic illustration when talking about flexbox ^^
Actually, that’s what I want you to visit to read the English article and practice the author’s demos.
A super good article about Flexbox with visual examples on all types of screens, click on the link to read the English version and test it on your computer for the best experience.