CSS Flex Layout

Hey Guyss !!

So,today I’m gonna light on a very interesting topic which makes CSS (Cascading Style Sheet) really stylish and flexible.

When i started my journey in Web Development, I used to think how the web pages looks so interactive and beautiful, which increased my interest in CSS.

CSS provide various properties that make a website look more beautiful and make it flexible and we are gonna discuss one such property today in this blog, i.e FLEX.

So before starting the actual content I wanna give you an overview about the flex(FlexBox) property in CSS.

The Flexible Box Module, usually referred to as Flexbox, makes it simple to align items vertically and horizontally using rows and columns. Here items means HTML elements. This method was designed to offer some space distribution between elements in a web page. In short Flexbox is used to position the elements.

Flexbox is one dimensional . When we describe flexbox as being one dimensional we are describing the fact that flexbox deals with layout in one dimension at a time — either as a row or as a column.

In flex box there is flex container , which is parent element of flex item.

Flexbox Container

Flexbox item

When working with flexbox you need to think in terms of two axes — the main axis and the cross axis. The main axis is defined by the flex-direction property, and the cross axis runs perpendicular to it.

Now we will look at properties for the Parent
(flex container)

Properties for the Parent
(flex container)

display:

This defines a flex container; inline or block depending on the given value

Flex-direction:

This property is responsible for direction of the main axis.

Its values can be →

1. row : left to right.
2. row- reverse : right to left.
3. column : top to bottom.
4. column- reverse : bottom to top.

row : from left to right

row-reverse : right to left

column and column-reverse respectively.

Flex Wrap :

flex- wrap

By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property.

.container {

flex-wrap: nowrap | wrap | wrap-reverse;

}

→(default): all flex items will be on one line

→wrap: flex items will wrap onto multiple lines, from top to bottom.

→wrap-reverse: flex items will wrap onto multiple lines from bottom to top.

flex-flow:

This is a shorthand for the flex-direction and flex-wrap properties, which together define the flex container’s main and cross axes. The default value is row nowrap.

.container {

flex-flow: column wrap;

}

justify-content:

This defines the alignment along the main axis. It helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.

→flex-start (default):

Items are packed toward the start of the flex-direction.

→flex-end:

Items are packed toward the end of the flex-direction.

→start :

Items are packed toward the start of the writing-mode direction.

→end:

Items are packed toward the end of the writing-mode direction.

→left:

Items are packed toward left edge of the container, unless that doesn’t make sense with the flex-direction, then it behaves like start.

→right:

Items are packed toward right edge of the container, unless that doesn’t make sense with the flex-direction, then it behaves like start.

→center:

Items are centred along the line

→space-between:

Items are evenly distributed in the line; first item is on the start line, 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-items:

This defines the default behaviour for how flex items are laid out along the cross axis on the current line. Think of it as the justify-content version for the cross-axis (perpendicular to the main-axis).

.container {

align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + … safe | unsafe;

}

→ (default):

Items are packed in their default position as if no value was set.

→flex-start :

Items packed to the start of the container. The (more supported) flex-start honours the flex-direction while start honours the editing-mode direction.

→flex-end:

Items packed to the end of the container. The (more support) flex-end honours the flex-direction while end honours the writing-mode direction.

→center:

Items centred 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

SO this is it Guys, in this way we learnt about the CSS Flex-Layout Property and its various types as well as their functionalities, which help to build a more responsive and rich UI-based web-pages.

In the next blog, we will be discussing about another such powerful property of CSS which enhances web-page’s responsiveness.

Thank You for reading this blog, See you in the next one!