How to Build Responsive Page Using CSS Flexible Box Layout?

Last updated on August 2, 2022

Nowadays every front-end developer has to make the website responsive for other platforms (like desktop, tablet, and mobile), there are many CSS frameworks available to turn the website responsive like bootstrap, and tailwind.

But if you want to write your own CSS then the flexbox layout model is the best way to make your website compatible with all platforms.

Flexbox is also referred to as the Flexible box module, it was designed to make distribution and alignment between items and interface. It has powerful alignment and size capabilities.

In this article, we learn the outline of the main features of flexbox. But we will explain further with examples.

Display Flex

Display flex CSS property in the parent element that controls your layout structure. It can make parent div to row and children to columns, and parent div to column and children to rows.

.parent{
	display :flex;
}
<div class=”parent”>
<div class=”children”>Flex-items</div>
<div class=”children”>Flex-items</div>
<div class=”children”>Flex-items</div>
</div>

You can define two more properties along with the display flex it likes:

- flex-direction: column | column-reverse | row | row-reverse;

Example

.parent{
	display :flex;
	flex-direction : row;
}

After defining flex-direction layout change in row and column see the example image.

row (default): left to right in LTR; right to left in RTL
row-reverse: the right to left in LTR; left to right in RTL
column: same as row but top to bottom
column-reverse: same as row-reverse but bottom to top

Flex Wrap

The flex-wrap CSS property allows the flexible items to be set in one line or can wrap into multiple lines if the wrapping is allowed, It sets the directions that lines are stacked

Justify Content

This property needs to define with flex in the main axis, when using flex item width some time space left after the flex items, to distribute the leftover space we need a justify-Content. Below is an example

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right;
}

Flex-start: flex items are positioned from the beginning of the container
Flex-End: flex items are positioned from the end of the container
end: items are positioned toward the end of the writing-mode direction.
left: items are positioned from the left edge of the container, unless that doesn’t make sense with the flex-direction, then it behaves like a start.
right: flex-items are positioned from the right edge of the flex container, unless that doesn’t make sense with the flex-direction, then it behaves like a start.
center: flex-items are centered along the line
space-between: items are evenly distributed in the line; the first item is on the start line, the last item on the end line
space-around: items are evenly distributed in the line with equal space around them. Note that visually the spaces aren’t equal, since all the items have equal space on both sides. The first item will have one unit of space against the container edge, but two units of space between the next item because that next item has its own spacing that applies.
space-evenly: items are distributed so that the spacing between any two items (and the space to the edges) is equal.

Align Content

If flex-direction is applied then the flex directions property will get priority on the Align-content property

Normal (default): items are positioned in the default position.
flex-start or start: items positioned to the start of the container.
flex-end or end: items positioned to the end of the container’s edge.
center: items centered in the container
space-between: items evenly distributed; the first line is at the start of the container while the last one is at the end
space-around: items evenly distributed with equal space around each line
space-evenly: items are evenly distributed with equal space around them
stretch: lines stretch to take up the remaining space

Align Items

It is a similar CSS property that can be used along the secondary axis(set vertical alignment if flex-direction is row means the main axis is a column or horizontal alignment if flex-direction is column)

flex-start: Align children flex-items positioned vertically from top to bottom
flex-end: Align children flex-items positioned vertically bottom
center: Align children flex-items positioned vertically centered
baseline: Align flex-items vertically so their baselines align
stretch: Force flex items to be the height of the container.

Written by

Ayaz Ali Shah

I am a skilled full-stack developer with extensive experience in creating and deploying large and small-scale applications. My expertise spans front-end and back-end technologies, along with database management and server-side programming.

Share on: