FLEXBOX

Flexbox Layout :

This Flexbox layout is easier to design flexible responsive layouts without using float or positioning.

Before flexbox layout, there were other layouts.

  • block - element behaves as block element (for sections in a webpage)
  • inline - element behaves as inline element(for text)
  • position - for explicit position of an element
  • floats - to float to left or right
  • table- for two-dimensional table data

Rule - To start using the Flexbox model, you need to first define a flex container.

A Flexible Layout must have a parent element with the display property set to flex.

Direct child elements of the flexible container automatically becomes flexible items.

Example :

HTML

<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>

CSS

.flex-container {
display: flex;
background-color: lightgreen;
height: 100px;
width: 50%;
}
.flex-container > div {
margin: 10px;
height: 80px;
width: 80px;
padding: 20px;
background-color: blueviolet;
font-size: 2rem;
text-align: center;
}

This will produce the following result −

flexbox

The flex container properties are:

  • flex-direction
  • justify-content
  • align-items
  • flex-wrap

flex-direction property :

  • The flex-direction property defines in which direction the container to arrange the flex elements.
  • We can arrange flex element is in two directions either row or column.
  • By default, flex-direction property is row.

Example :

CSS

.flex-container {
display: flex;
flex-direction: column;
background-color: lightgreen;
width: 50%;
}

This will produce the following result −

flex-direction

justify-content property :

  • This property is used to align flex items in the flex-container to it’s start or end or center and provide space between the flex items.

Example :

CSS

.flex-container {
display: flex;
justify-content: center;
background-color: lightgreen;
height: 100px;
width: 50%;
}

This will produce the following result −

center

CSS

.flex-container {
display: flex;
justify-content: space-around;
background-color: lightgreen;
height: 100px;
width: 50%;
}

This will produce the following result −

space-around

align-items Property :

  • This align-items property works just like justify-content property.
  • For example, if flex-direction property value is row then justify-content property works in row direction and align-items property works in opposite direction i.e. column direction. If flex-direction is in column direction then justify-content works in column direction and align-items property works in opposite direction i.e. row direction.
  • Just remember this, justify-content property always works in the same direction as flex-direction property and align-items property always works in opposite direction of flex-direction property.

Example :

CSS

.flex-container {
display: flex;
justify-content: space-around;
align-items: center;
background-color: lightgreen;
height: 400px;
width: 50%;
}

This will produce the following result −

align-items

flex-wrap :

  • The flex-wrap property specifies whether the flex items should wrap or not.
  • By default flex-wrap property value is nowrap.

Example :

CSS with nowrap

.flex-container {
display: flex;
background-color: lightgreen;
height: 200px;
width: 50%;
}

This will produce the following result −

nowrap

CSS with wrap

.flex-container {
display: flex;
flex-wrap: wrap;
background-color: lightgreen;
height: 200px;
width: 50%;
}

This will produce the following result −

wrap