CSS Flexbox


Go to main Page

Flexbox in CSS

What is Flexbox in CSS?

Flexbox is a one-dimensional layout to create rows and columns.

By using flexbox we can easily make a responsive webpage.

we have to place containers in a flexbox and then make them responsive by using flexbox properties.

Example


<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  background-color: pink;
}

.flex-container  div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}
</style>
</head>
<body>

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


</body>
</html>



Flexbox Properties

  1. justify-content
  2. align-items
  3. flex-direction
  4. flex-flow
  5. align-content
  6. flex-wrap

1)Justify-content

justify-content property is used to align the items.

We can align it in start of flexbox.



.flex-container {
  display: flex;
  justify-content: flex-start;
}


We can align it in center.



.flex-container {
  display: flex;
  justify-content: center;
}


we can align it at the end of flexbox.



.flex-container {
  display: flex;
  justify-content: flex-end;
}



2)Align-items

The align-items property is used to align items in flexbox.

We can align items in start of flexbox.



.flex-container {
  display: flex;
  align-items:flex-start;
  }


We can align items in center.



.flex-container {
  display: flex;
  align-items: center;
}


we can align items at the end of flexbox.



.flex-container {
  display: flex;
  align-items: flex-end;
}



3)Flex-direction

The flex-direction property is used to define the direction of the items in the flexbox.

We can arrange items in column.



.flex-container {
  display: flex;
  flex-direction: column;
}


We can also reverse items in the column.



.flex-container {
  display: flex;
  flex-direction: column-reverse;
}


we can arrange items in row.



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



We can also reverse items in the row.



.flex-container {
  display: flex;
  flex-direction: row-reverse;
}



4)Flex-flow

flex-flow property is a shorthand property for setting both the flex-direction and flex-wrap properties.



.flex-container {
  display: flex;
  flex-flow: row wrap;
}



5)align-content

Align content property is used to align the lines of flexbox.



.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-between;
}


6)Flex wrap

The flex-wrap property is used to wrap items in flexbox.



.flex-container {
  display: flex;
  flex-wrap: wrap;
}