The concept of Flexbox in CSS

  Deven Rai
  28 Aug, 2021
  Programming and Frameworks

The concept of Flexbox in CSS Part I

CSS has progressed significantly in recent years. Filters, effects, and transformations were all well-received by designers. But there was something lacking. Something that we all hoped for. Designing intelligent page layouts using CSS seems to have lingered for far too long, prompting many of us to write primitive CSS. We were always dealing with floats, table display tricks, and the implications that came with them. You can definitely connect to this if you've been writing CSS for a while. And if you don't know what CSS is, you're in for a surprise. We can all put our cheesy CSS methods to rest now. There will be no more floats or table-cell displays. It's time to move on to a more current syntax for creating smart designs.

Flex in CSS?

Even when the viewport and the size of your elements are dynamic or unknown, the Flexbox model provides an effective approach to layout, align, and allocate space among elements inside your page. If that comes out as excessively stiff, I understand. Well, I'll explain what that implies in writing CSS or are just getting started. Without requiring float or positioning, the Flexible Box module makes it easier to create a flexible as well as adaptable layout structure.

Why Flex?

✔ All of the blocks are easily formed which is flexible.

✔ Elements can be squeezed and enlarged according to regulations, taking up the minimum amount of space.

✔ The text's baseline functions well when aligned up and down.

✔ Easy syntax and it takes a quick process to learn them.

Flexbox Elements

A parent element with the display attribute set to flex is required for a Flexible Layout. The flexible container's direct child elements are automatically transformed into flexible objects as shown in the example below:

1
2
3

Above pinkish color showing the background colors that has been in fl ex container showing the box model by numbers

Output: Figure: Flex container showing three flex items. The Flex direction property Here, in flexbox modeling, the default flex direction is aligned in a row. The flex-direction attribute specifies how the flex elements should be positioned in the container that are shown below as an example: The column value:

1
2
3

Flex direction as alligned vertically

Output: The column reverse value: This property does the same things as shown in previous except the fact that the flex items are aligned in reverse order as shown below: .flexcontainer { display: flex; flex-direction: column-reverse; background-color: rgb(158, 80, 158); } Output: The row value: This property stacks the flex items horizontally which is the default flex property if you didn’t specify any direction, the default direction is automatically set to row as shown below: .flexcontainer { display: flex; flex-direction: row; /*defining with the property row*/ background-color: rgb(158, 80, 158); } Output: If we want to align items horizontally, we also do not have to specify it mentioning its direction to row as shown below: .flexcontainer { display: flex; /*flex-direction: row; /*defining with the property row*/ background-color: rgb(158, 80, 158); } Here I have commented out the direction but the output is the same as that of the previous one. Output: Row reverse value: this property reverses the flex items in a opposite way from right to left as shown below: .flexcontainer { display: flex; flex-direction: row-reverse; /*defining with the property row reverse*/ background-color: rgb(158, 80, 158); } Output: The flex wrap value: This property implies to fit the large number of flex items in a container as shown below:

1
2
3
3
3
3
3
3
3
3
3
3

Wrapped in a container which means to continue listing inside the fle x container

Output: Figure: flex items fitting inside the flex container when increasing the number of items. No wrap value: It implies that the content or items inside the container will not be wrapped which is also the default property of flexbox when no set to others which is shown below: .flexcontainer { display: flex; flex-direction: row; flex-wrap: nowrap; /*defining with the property flex-wrap*/ background-color: rgb(158, 80, 158); } Output: first 15 items in the container After those 15 elements the items start to get out of the container which is the drawbacks of no-wrap property. It is not suitable for big data elements. wrap reverse value: it implies that the items inside the container is wrapped but is stacked in reverse order as shown below: .flexcontainer { display: flex; flex-direction: row; flex-wrap: wrap-reverse; background-color: rgb(158, 80, 158); } Output: wrapped in a reverse way When you shrink the browser window you will see like this: Flex flow property: It is a shortcut method that comprises two properties as a mixture of flex-direction and flex wrap as shown below: Using row wrap value: fitting up the number of items in the container if we want to list the items horizontally and also to wrap up them then we don't have to use flex-direction and flex-wrap property. .flexcontainer { display: flex; flex-flow: row wrap; background-color: rgb(158, 80, 158); } Output:


Cover
CSS Flex

The concept of Flexbox in CSS Part I CSS has progressed significantly in recent years. Filters, effects, and transformations were all well-received by designers. But there was something lacking. Something that we all hoped for. Designing intelligent page layouts using CSS seems to have lingered for far too long, prompting many of us to write primitive CSS. We were always dealing with floats, table display tricks, and the implications that came with them. You can definitely connect to this if you've been writing CSS for a while. And if you don't know what CSS

is, you're in for a surprise. We can all put our cheesy CSS methods to rest now. There will be no more floats or table-cell displays. It's time to move on to a more current syntax for creating smart designs.

Flex in CSS?

Even when the viewport and the size of your elements are dynamic or unknown, the Flexbox model provides an effective approach to layout, align, and allocate space among elements inside your page. If that comes out as excessively stiff, I understand. Well, I'll explain what that implies in writing CSS or are just getting started. Without requiring float or positioning, the Flexible Box module makes it easier to create a flexible as well as adaptable layout structure.

Why Flex?

✔ All of the blocks are easily formed which is flexible.

✔ Elements can be squeezed and enlarged according to regulations, taking up the minimum amount of space.

✔ The text's baseline functions well when aligned up and down.

✔ Easy syntax and it takes a quick process to learn them.

Flexbox Elements

A parent element with the display attribute set to flex is required for a Flexible Layout.

The flexible container's direct child elements are automatically transformed into flexible objects as shown in the example below:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>CSS FLEX</title>

<style>

/*HTML classes that are used in css using dot operator as shown here*/

.flexcontainer {

display: flex;

background-color: rgb(158, 80, 158);

}

.flexcontainer>div {

background-color: #c0ebee;

margin: 10px;

padding: 40px;

font-size: 40px;

}

</style>

</head>

<body>

<div class="flexcontainer">

<div>1</div>

<div>2</div>

<div>3</div>

</div>

<p>Above pinkish color showing the background colors that has been in fl ex container showing the box model by numbers </p>

</body>

</html>

Output:

Figure: Flex container showing three flex items.

The Flex direction property

Here, in flexbox modeling, the default flex direction is aligned in a row. The flex-direction attribute specifies how the flex elements should be positioned in the container that are shown below as an example: The column value:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>CSS FLEX</title>

<style>

/*HTML classes that are used in css using dot operator as shown here*/

.flexcontainer {

display: flex;

flex-direction: column;

background-color: rgb(158, 80, 158);

}

.flexcontainer>div {

background-color: #c0ebee;

margin: 10px;

padding: 40px;

font-size: 40px;

width: 100px;

}

p{

text-align: center;

}

</style>

</head>

<body>

<div class="flexcontainer">

<div>1</div>

<div>2</div>

<div>3</div>

</div>

<p>Flex direction as alligned vertically </p>

</body>

</html>

Output:

The column reverse value: This property does the same things as shown in previous except the fact that the flex items are aligned in reverse order as shown below:

.flexcontainer {

display: flex;

flex-direction: column-reverse;

background-color: rgb(158, 80, 158);

}

Output:

The row value: This property stacks the flex items horizontally which is the default flex property if you didn’t specify any direction, the default direction is automatically set to row as shown below:

.flexcontainer {

display: flex;

flex-direction: row; /*defining with the property row*/

background-color: rgb(158, 80, 158);

}

Output:

If we want to align items horizontally, we also do not have to specify it mentioning its direction to row as shown below:

.flexcontainer {

display: flex;

/*flex-direction: row; /*defining with the property row*/

background-color: rgb(158, 80, 158);

}

Here I have commented out the direction but the output is the same as that of the previous one.

Output:

Row reverse value: this property reverses the flex items in a opposite way from right to left as shown below:

.flexcontainer {

display: flex;

flex-direction: row-reverse; /*defining with the property row reverse*/

background-color: rgb(158, 80, 158);

}

Output:

The flex wrap value:

This property implies to fit the large number of flex items in a container as shown below:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>CSS FLEX</title>

<style>

/*HTML classes that are used in css using dot operator as shown here*/

.flexcontainer {

display: flex;

flex-direction: row;

flex-wrap: wrap;

background-color: rgb(158, 80, 158);

}

.flexcontainer>div {

background-color: #c0ebee;

margin: 10px;

padding: 30px;

font-size: 40px;

width: 100px;

}

p{

text-align: center;

}

</style>

</head>

<body>

<div class="flexcontainer">

<div>1</div>

<div>2</div>

<div>3</div>

<div>3</div>

<div>3</div>

<div>3</div>

<div>3</div>

<div>3</div>

<div>3</div>

<div>3</div>

<div>3</div>

<div>3</div>

</div>

<p>Wrapped in a container which means to continue listing inside the fle x container </p>

</body>

</html>

Output:

Figure: flex items fitting inside the flex container when increasing the number of items.

No wrap value:

It implies that the content or items inside the container will not be wrapped which is also the default property of flexbox when no set to others which is shown below:

.flexcontainer {

display: flex;

flex-direction: row;

flex-wrap: nowrap; /*defining with the property flex-wrap*/

background-color: rgb(158, 80, 158);

}

Output: first 15 items in the container After those 15 elements the items start to get out of the container which is the drawbacks of no-wrap property. It is not suitable for big data elements.

wrap reverse value: it implies that the items inside the container is wrapped but is stacked in reverse order as shown below:

.flexcontainer {

display: flex;

flex-direction: row;

flex-wrap: wrap-reverse;

background-color: rgb(158, 80, 158);

}

Output: wrapped in a reverse way

When you shrink the browser window you will see like this:

Flex flow property:

It is a shortcut method that comprises two properties as a mixture of flex-direction and flex wrap as shown below:

Using row wrap value: fitting up the number of items in the container if we want to list the items horizontally and also to wrap up them then we don't have to use flex-direction and flex-wrap property.

.flexcontainer {

display: flex;

flex-flow: row wrap;

background-color: rgb(158, 80, 158);

}

Output:

About Author


Deven Rai
Deven Rai

This a short description about the blog author Deven Rai. This a short description about the blog author Deven Rai. This a short description about the blog author Deven Rai. This a short description about the blog author Deven Rai. This a short description about the blog author Deven Rai. This a short description about the blog author Deven Rai. This a short description about the blog author Deven Rai. This a short description about the blog author Deven Rai.

View All Articles

Comments


No comments yet. Be first to post one.

Add Comment



Drop us a Message

9801131225
Available 24 hours for your meaasge