The importance of flexbox training in CSS version 3 is not hidden from anyone. In the article Introduction to FlexBox, along with a practical example, we learned about FlexBox. So flexBox is a tool that helps you design one-page web items easily, quickly, and responsibly by viewing elements one-dimensionally. Also it supports various FlexBox browsers and this has made many developers interested in using this useful tool. We also talked about the benefits of using FlexBox and finally started coding it with two examples. So in this article, we are going to teach FlexBox more specialized.
Flex Container
Just as in designing a page with CSS Grid, the elements are placed in a parent grid called Container, in FlexBox we have a holding element called flex-container:
.flex-container {
display : flex;
background-color : DodgerBlue;
}
.flex-container > div {
background-color : # f1f1f1 ;
margin : 50px ;
padding : 50px ;
font-size : 30px ;
}
< div class = "flex-container" >
< div > 1 </ div >
< div > 2 </ div >
< div > 3 </ div >
</ div >
This form specifies the Container:
Flex Container
In the FlexBox, a set of features is defined as being assigned to the holder only. These properties include:
- display
- flex Direction
- flex flow
- justify content
- align content
- align items
In the following FlexBox tutorial article, we will explain each of these features.
Display
In this FlexBox tutorial, we will explain the Display feature in FlexBox.
As you can see in the figure below, by default all divs are display: block, so each div takes up the entire width of the page, causing the next divs to go down and not fit next to each other:
To get started with Flexbox , we need to turn our holder into Flexbox. To define a FlexBox holder, we need to specify the display value to be flex or inline-flex:
.flex-container {
display : flex | inline-flex;
}
In this case, the elements no longer occupy the entire width of the page and are placed next to each other inline. This change may seem simple, but in fact we have activated something powerful behind the scenes.
Flex Direction
In this FlexBox tutorial, we will explain the Flex Direction feature in FlexBox.
The Container in the FlexBox has two axes:
- main axis
- cross axis: cross axis
These axes are specified by default in the first image of this article and in the maintenance section.
In the figure in the previous section, we saw that when we set the display to flex, all the divs were placed horizontally, from left to right. This positioning is due to the fact that by default the items are placed along the main axis or Main axis from left to right and are tsarized.
Using the Flex-direction property, you can change the main axis and the default mode. By default, the value of this property is row, but by changing the value of this property to column, we have:
As shown in the figure, when we change this property to column, the divas are vertical and from top to bottom. Also the point to note here is that by setting the column value for this property, the elements are not in the cross axis direction; This value causes the main and cross axes to shift, which is why the elements become vertical. Also there are other values for the flex-direction property; Including:
- row-reverse: causes the elements to move from right to left.
- column-reverse: causes the elements to be placed from the bottom up.
.flex-container {
display : flex;
flex-direction : row | column | column-reverse | row-reverse;
}
The following image shows the difference between column and column-reverse:
Flex wrap
In this section of FlexBox tutorial, we will explain the Flex wrap feature in FlexBox.
As we saw in the previous sections, by default all elements are aligned. Using the flex-wrap property, you can specify that each element be in several lines, each of which is called a flex line.
- nowrap: (Default) Items are placed in a line next to each other.
- wrap: Items are arranged in several lines. They are on the rtl pages from right to left and on the ltr pages from left to right.
- wrap-reverse: This value is the inverse of the wrap value.
.flex-container {
display : flex;
flex-wrap : nowrap | wrap | wrap-reverse;
}
Flex flow
In this section of FlexBox tutorial, we will explain the Flex flow feature in FlexBox.
You can adjust the flex-direction and flex-wrap values using this value. The default value is row nowrap.
.flex-container {
display : flex;
flex-flow : row wrap; / * flex-direction || flex-wrap * /
}
Justify content
In this section of FlexBox tutorial, we will explain the Justify content feature in FlexBox.
Using this feature, you can control how the elements are aligned on the main axis. Here the differences between Main and Cross axis are clearer. This attribute accepts 5 main values:
- Flex-start: is the default value and causes the elements to be at the beginning of the main axis. If the flex-direction value is equal to row, after placing the flex-start value for the justify-content attribute, all divs are aligned to the left.
- Flex-end: All elements are aligned to the right.
- Center: The elements are located in the middle.
- Space-between: The same space is placed between all elements. Note that there is no space at the beginning and end.
- Space-around: The difference between this case and the previous one is that space will be added to the beginning and end.
.flex-container {
display : flex;
justify-content : flex-start | flex-end | center | space-between | space-around;
}
Align content
In this FlexBox tutorial, we will explain the Align content feature in FlexBox.
This property, when the flex container has more space than the flex lines, can determine how they are arranged. Align-content property values are equal to property values and have only one value more than . These values are:
- : With this value the flex lines are added at the beginning of the flex container.
- : With this value, the flex lines are collected at the end of the flex container.
- : With this value, the flex lines are collected in the middle of the flex container.
- : The empty space is evenly distributed between the flex lines. The first line is at the beginning and the last line is at the end of the flex container.
- : Empty space is evenly divided between flex lines.
- : (Default) flex lines are drawn to fill in the blanks.
.container {
display : flex;
align-content : flex-start | flex-end | center | space-between | space-around | stretch;
}
Align items
In this FlexBox tutorial, we will explain the Align items feature in FlexBox.
If you understand the justify-content feature well, you will not have a problem with this feature either. This property is very similar to justify-content. justify-content aligns the elements based on the Main axis and the align-items attribute aligns the elements based on the Cross axis. Values that align-items are:
- : Items are placed at the cross start point.
- : Items are placed at the cross end.
- : The items are located in the middle of the flex line.
- : Items are aligned according to their lines.
- : (Default) If the height of the items is not specified, the items are stretched and fill the flex line.
.flex-container {
display : flex;
align-items : flex-start | flex-end | center | baseline | stretch;
}
For example, if we want to align the German vertically in the middle, we have:
html , body {
height : 100% ;
margin : 0 ;
}
body {
-webkit- align-items : center;
-ms- flex -align: center;
align-items : center;
display : -webkit-flex;
display : flex;
}
In this code, using the features and specifications of Flexbox, we made the contents inside the body be placed in the middle of the alignment. To do this, we first set the display to flex and the alignments to center, and set the Vendor Prefixes for more support.
Stretch value note
If we want the Stretch value to work and the desired element to occupy the entire space of the Cross axis, we have two options:
- Do not use the height attribute for the desired elements.
- If using height, set its value to auto. Note that if we define the height attribute for the element, it will override the value of the stretch, in which case the element does not take up all the space.
Note on the amount of baseline
When we set the attribute value to baseline, the elements are adjusted so that the bottom of the paragraph inside the div is aligned and aligned. If there is no paragraph inside the divas, the divas will be aligned to their lower position. As shown below:
Flex Item
In this FlexBox tutorial, we will explain the Flex Item feature in FlexBox.
The elements that are placed inside the holder and as a child are called Flex Item. To flex children, it is enough to put them in a div div like the following code in the HTML tag, and there is no need to define a specific class in style:
< div class = "flex-container" >
< div > 1 </ div >
< div > 2 </ div >
< div > 3 </ div >
< div > 4 </ div >
</ div >
Note, however, that items, like the holder, have their own properties, which we will review in the following sections of the FlexBox tutorial article.
Properties of children (Flex Items)
As we said in the FlexBox, a set of features is defined in a way that is attributed only to children. These properties include:
- order
- flex grow
- And flex shrink
- flex basis
- flex
- align self
In the following, we will explain each of these features.
Order
In this section of the FlexBox tutorial, we will explain the Order feature in the FlexBox.
This value can specify the location of the item next to other items. The default value is 0. If only the order value of one of the items is specified, that item is placed after all items; But if this property is defined for all items, the location of the items can be specified. This property is one of the most useful properties when responding to responsive design. To order, you can define a separate class for each item or specify it directly in HTML as follows:
< div class = "flex-container" >
< div style = "order: 3" > 1 </ div >
< div style = "order: 2" > 2 </ div >
< div style = "order: 4" > 3 </ div >
< div style = "order: 1" > 4 </ div >
</ div >
Flex grow
In this FlexBox tutorial, we will explain the Flex grow feature in FlexBox.
This property determines the ability to enlarge an item. flex-grow accepts a numeric value without a unit. The default value is 0; That is, the items do not have the ability to enlarge. If the flex container has an empty space and you give it a flex-grow: 1 item, that item will grow to the point where the empty space inside the holder disappears.
Note that when the flex-direction property of the holder is equal to row, flex-grow is applied to the width of the item, and if the value of that property is equal to column, flex-grow is applied to height.
< div class = "flex-container" >
< div style = "flex-grow: 1" > 1 </ div >
< div style = "flex-grow: 1" > 2 </ div >
< div style = "flex -grow: 8 " > 3 </ div >
< div style = " flex-grow: 1 " > 4 </ div >
</ div >
If all flex items flex-grow: 1; Come on, they all grow to the same size. If you set the flex-grow value of one of these items to 2, that item will be twice as large as the other item.
Flex shrink
In this FlexBox tutorial, we will explain the Flex shrink feature in FlexBox.
This property determines the ability to shrink an item if necessary. The default value is 1, meaning items can be scaled down. If the holder flex-wrap property is equal to nowrap, the items will shrink until their width reaches 0:
Now if we set the flex-shrink value of one of the items to 2, that item will be reduced by 2 times the other items.
Sample code:
< div class = "flex-container" >
< div > 1 </ div >
< div > 2 </ div >
< div style = "flex-shrink: 0" > 3 </ div >
< div > 4 </ div >
</ div >
Flex basis
In this FlexBox tutorial, we will explain the Flex basis feature in FlexBox.
This property determines the base value of the item width or height. That is, the width or height (depending on the column or row of items) can not be less than this base value. This property works like min-height and min-width. The default value of this property is auto, meaning that flex items can be scaled down to a width or height of zero.
< div class = "flex-container" >
< div > 1 </ div >
< div > 2 </ div >
< div style = "flex-basis: 200px" > 3 </ div >
< div > 4 </ div >
</ div >
Flex
In this FlexBox tutorial, we will explain the Flex feature in FlexBox.
This property is actually a possibility for shorthand for flex-grow, flex-shrink and flex-basis properties. In the following code, flex values are specified in the comments, respectively. The second and third values (flex-shrink and flex-basis) are optional.
<div class = "flex-container" >
< div > 1 </ div >
< div > 2 </ div >
< div style = "flex: 0 0 200px" > 3 </ div > / * flex: flex-grow flex-shrink flex-basis * /
< div > 4 </ div >
</ div
Align self
In this section of the FlexBox tutorial, we will explain the Align self feature in FlexBox.
As the last remaining feature of the FlexBox topic, we introduce the align-self feature. This property specifies the position and alignment of an element individually and overwrites the align-items property for that element. The values used for this property are similar to the align-items property. The default value is auto, in which case the position follows the align-items attribute. For example, by applying this code, only the first square is in the middle and the rest are in the beginning:
#container {
align-items : flex-start;
}
.square #one {
align-self : center;
}
Now suppose you have 4 squares and use the align-self property for 2 and the align-items: center and flex-direction: row properties for the other. This places the two fixed elements on the right in the center and the two items on the left are repositioned using the align-self attribute. As a result, the output will be as follows:
Reactive page with FlexBox
After learning the FlexBox, in this section we want to design a simple responsive page with the FlexBox.
HTML code:
< div class = "container" >
< div class = "item item1 header" > header </ div >
< div class = "item item2 aside aside1" > aside1 </ div >
< div class = "item item3 main" > main </ div >
< div class = "item item4 aside aside2" > aside2 </ div >
<div class ="item item5 footer" > footer </ div >
</ div >
CSS code:
.container {
margin : 10px ;
padding : 10px ;
min-height : 150px ;
background-color : # a13647 ;
/ * Flexbox * /
display : flex;
flex-flow : row wrap;
}
.container .item {
background-color : # d84a43 ;
color : #fff ;
margin : 10px ;
padding : 10px ;
min-height : 50px ;
}
.item {
flex : 1 ; / * flex-grow: 1; * /
}
.item .header {
flex : 100% ; / * flex-basis: 100%; * /
}
.item .aside {
flex : 0 200px ; / * flex-grow: 0; flex-basis: 200px; * /
height : 150px ;
}
.item .main {
flex : 1 auto; / * flex-grow: 1; flex-basis: auto; * /
}
.item .footer {
flex : 100% ;
}
@media screen and ( max-width : 950px )
it .item .header {
order : 1 ;
}
.item .aside {
flex : 1 auto;
}
.item .aside .aside1 {
order : 3 ;
}
.item .aside .aside2 {
order : 4 ;
}
.item .main {
order : 2 ;
flex : 1 100% ;
}
.item .footer {
order : 5 ;
}
}
@media screen and ( max-width : 600px )
it .item .aside {
flex : 100% ; / * flex-basis: 100%; as min-width: 100%; * /
}
}
Remove Margin with FlexBox
If you have worked with CSS, you must have encountered the problem in many places that you want to put a number of elements together and use a margin to adjust the distance between them. This often happens by putting members of a menu together. The problem is that to add space between items, a property like margin-right is set, but an extra space is created to the right of the last menu item, and the problem with this extra space is problematic. Consider the following code, for example:
<! DOCTYPE html >
< html >
< head >
< title > List </ title >
< style type = "text / css" >
* *
box-sizing : border-box;
margin : 0 ;
padding : 0 ;
}
.clear : before,
.clear: after {
content: "" ;
display : table;
}
.clear : after {
clear: both;
}
.list {
width : 800px ;
list-style : none;
margin : 100px auto 0 ;
background-color : yellow;
}
.person {
width : 23% ;
margin-right : 2.66% ;
float : left;
background-color : red;
padding : 10px ;
}
</ style >
</ head >
< body >
< ul class = "list clear" >
< li class = "person" > Item 1 </ li >
< li class = "person" > Item 2 </ li >
< li class = "person" > Item 3 </ li >
< li class = "person"> Item 4 </ li>
</ ul >
</ body >
</ html >
You can see that we put a menu with 4 li and inside the style, we set the width of each of them by 23% and determined the distance between them using margin-right. The current output of the above figure will be as follows:
As shown in the figure, the last item is down due to the problem of the extra space stated above. A common way to solve this problem is to remove the extra space for the last element to get to the bottom of the image:
<! DOCTYPE html >
< html >
< head >
< title > List </ title >
< style type = "text / css" >
* *
box-sizing : border-box;
margin : 0 ;
padding : 0 ;
}
.clear : before,
.clear: after {
content: "" ;
display : table;
}
.clear : after {
clear: both;
}
.list {
width : 800px ;
list-style : none;
margin : 100px auto 0 ;
background-color : yellow;
}
.person {
width : 23% ;
margin-right : 2.66% ;
float : left;
background-color : red;
padding : 10px ;
}
.person : last-child {
margin-right : 0 ;
}
</ style >
</ head >
< body >
< ul class = "list clear" >
< li class = "person" > Item 1 </ li >
< li class = "person" > Item 2 </ li >
< li class = "person" > Item 3 </ li >
< li class = "person"> Item 4 </ li>
</ ul >
</ body >
</ html
You see, we set a last-child false class and set the margin-right value to 0. As a result, extra space was lost and all items were included in the menu. There is also an easier way to remove false classes like nth-, first- and last-child, and that is to use FlexBox. You can easily put spaces between elements by setting the space-between value for the justify-content attribute and do the following:
<! DOCTYPE html >
< html >
< head >
< title > List </ title >
< style type = "text / css" >
* *
box-sizing : border-box;
margin : 0 ;
padding : 0 ;
}
.list {
display : flex;
justify-content : space-between;
width : 800px ;
list-style : none;
margin : 100px auto 0 ;
background-color : yellow;
}
.person {
flex-basis : 23% ;
background-color : red;
padding : 10px ;
}
</ style >
</ head >
< body >
< ul class = "list clear" >
< li class = "person" > Item 1 </ li >
< li class = "person" > Item 2 </ li >
< li class = "person" > Item 3 </ li >
< li class = "person"> Item 4 </ li>
</ ul >
</ body >
</ html >
In this code, we set the display style to flex for the list class, and the flex-basis attribute to 23% for the person class.
Introducing some good complementary sources:
The taught items can be viewed and practiced interactively on this page. The building codes of this interactive section have been uploaded due to their large volume and you can download them here.
Finally, we introduce some online resources to complete the Flexbox tutorial:
- Tools : An online tool that can be used to create your own template and framework based on flexbox and deliver CSS code to the output.
- Bolma Framework: A powerful and up-to-date FlexBox-based CSS framework for building responsive designs and advanced grading.
- Site : A site for designing and building responsive designs and complex structures.
- The first site and the second site : two English sites with complete and visual training of the contents.
- Game site : A very attractive site for teaching the said items along with the game.
Conclusion:
In this article, we taught the FlexBox and then designed a responsive page. We fixed the common problems in CSS with the help of FlexBox and finally introduced some additional online resources.