CSS - Flexbox

Previous
Next

Flexbox organizes elements within a container along a single dimension, which can be either horizontally or vertically aligned.

What is CSS Flexbox?

CSS flexbox is a layout model in CSS that provides an efficient and flexible way to arrange and distribute space between items within a container. It arranges elements in a single dimension, either horizontally or vertically, within a container.

In this article we will cover all the properties for managing the positioning, alignment, and gaps between elements along both the main and cross axes briefly.

Table of Contents


 

Elements of Flexbox

  • Flexbox Container: The flex container defines the outer element of flexbox, where all the child elements are present. A flexbox container can be defined by setting 'display: flex' or 'display: inline-flex'.
  • Flexbox items: Flexbox items are direct children of flexbox container. This items can be arranged vertically and horizontally inside flexbox container based on need.
  • Main Axis: Main axis is primary axis along which items arranged in a container. By default this is horizontal axis.
  • Cross Axis: >Cross axis is perpendicular axis to primary axis. By default this is vertical axis.

Following Diagram will demonstrate the CSS Flexbox:

CSS Flexbox

Basic Flexbox Layout

Flexbox is commonly used to create responsive flexbox layout.

Example

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      .container {
         display: flex;
         flex-direction: row;
         justify-content: space-between;
         align-items: center;
         height: 100vh;
      }
      .item {
         background-color: lightcoral;
         padding: 20px;
         margin: 10px;
         border: 3px solid #ccc;
      }
   </style>
</head>

<body>
      <div class="container">
         <div class="item">Item 1</div>
         <div class="item">Item 2</div>
         <div class="item">Item 3</div>
      </div>
</body>
</html>

Vertical Flexbox Layout

In CSS, we can also define vertical flexbox by setting `flex-direction: column`.

Example

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      .container {
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         height: 100vh;
      }
      .item {
         background-color: lightseagreen;
         padding: 20px;
         margin: 10px;
         border: 3px solid #ccc;
      }
   </style>
</head>

<body>
   <div class="container">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
   </div>
</body>
</html>

Flexbox Justify Content Property

The `justify-content` property is commonly used inside flexbox containers to align flexbox items inside container. There are several values possible for this property, for a complete reference of justify-content property visit our tutorial on justify-content property.

Some of the commonly used values of justify-content is noted down below. There are lot more values associated with it.

// Align Item at center of main axis
justify-content: center; 

// Align Item at start of main axis
justify-content: flex-start; 

// Align Item at end of main axis
justify-content: flex-end; 

// Align Item at left side of main axis
justify-content: left;

// Align Item at right side of main axis
justify-content: right;

Flexbox Align Items Property

The `align-items` property in CSS is used to align flex items across cross axis (vertical axis in a row layout, horizontal axis in a column layout) of the container. There are several values associated with this property. To learn more about `align-items` property visit our tutorial on CSS Align Items. 

// Align items at start of cross axis of container
align-items: flex-start;

// Align items at end of cross axis of container
align-items: flex-end;

// Align items at center of cross axis of container
align-items: center;

// Align baselines of items (For items with variable sizes)
align-items: baseline;

// Stretch items along cross axis to fill container
align-items: stretch;

Centering a Div using Flexbox

Centering a div element( or any other elements ) is always a challenging and most discussed problem in CSS. With the help of CSS flexbox we can easily center a div element inside a container. We have to use `justify-content` and `align-items` properties to center items, following code shows how this is done.

Example

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      .flex-container {
         display: flex;
         /* Center horizontally */
         justify-content: center;
         /* Center Vertically */
         align-items: center;
         border: 1px solid #ccc;
         height: 250px;
         background-color: grey;
      }

      .flex-item {
         background-color: lightblue;
         border: 1px solid #333;
         padding: 5px;
         height: 70px;
         width: 70px;
      }  
   </style>
</head>

<body>
   <div class="flex-container">
      <div class="flex-item">
         This div is in center of container
      </div>
   </div>
</body>
</html>

Flexbox Wrap Property

Flexbox with wrap property allows items within a container to move to next line when there is no enough space in a single line. This helps to maintain a responsive layout.

Following code demonstrates how to use flexbox to create a responsive layout that centers its items and wraps them to fit within the available space. For a complete guidance on flex wrap, visit our tutorial on CSS flex-wrap.

.container {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
}
.item {
   padding: 20px;
   margin: 10px;
   /* base size 100px */
   flex: 1 1 100px; 
}

Flexbox Align Self Property

In CSS, we have `align-self` property which can be used to override `align-items` property set on container. This helps to dynamically place each items at special locations inside container.

Following code shows how to use `align-self` property. Here we can see that `align-items: stretch` is not applicable to second and third items, this property is override by `align-self` property of items.

.container {
   display: flex;
   flex-direction: row;
   justify-content: space-around;
   align-items: stretch;
   height: 250px;
}
.item {
   background-color: lightpink;
   padding: 20px;
   margin: 10px;
   border: 1px solid #ccc;
}
.item:nth-child(2) {
   /* Center 2nd item along the cross axis */
   align-self: center; 
}
.item:nth-child(3) {
   /* Align 3rd item at the end of the cross axis */
   align-self: flex-end; 
}

CSS Flexbox Container Properties

Following are all the CSS properties that can be applied to flex container.

Property Value Example
flex-direction Sets the flex direction of the flex items.
flex-wrap Sets whether flex items should wrap onto the next line
justify-content Sets the alignment of flex items along the main axis.
align-items Sets the alignment of flex items along the cross axis.
align-content Sets the alignment and spacing of flex lines within the flex container.
flex-flow Sets both the flex-direction and flex-wrap properties.

CSS Flexbox Items Properties

Following are all the CSS properties that can be applied to flex items.

Property Value Example
flex-grow Sets flex item to grow within a flex container.
flex-shrink Sets flex item to shrink in size to fit the available space.
flex-basis Sets the initial size of a flex item.
flex Shorthand property, combines three flex-related properties: flex-grow, flex-shrink, and flex-basis.
align-self Sets the alignment of a specific flex item along the cross-axis.
order Used to specify the order in which flex items appear inside their flex container.
Print Page
Previous
Next
Advertisements