Flexbox

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.

Elements of Flexbox
Basic Flexbox Layout
Vertical Flexbox Layout
Flexbox Justify Content
Flexbox Align Items

Centering a Div
Flexbox Wrap Property
Flexbox Align Self
Flexbox Container Properties
Flexbox Items Properties

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:

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
  &lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>

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.	Try It
flex-wrap	Sets whether flex items should wrap onto the next line	Try It
justify-content	Sets the alignment of flex items along the main axis.	Try It
align-items	Sets the alignment of flex items along the cross axis.	Try It
align-content	Sets the alignment and spacing of flex lines within the flex container.	Try It
flex-flow	Sets both the flex-direction and flex-wrap properties.	Try It

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.	Try It
flex-shrink	Sets flex item to shrink in size to fit the available space.	Try It
flex-basis	Sets the initial size of a flex item.	Try It
flex	Shorthand property, combines three flex-related properties: flex-grow, flex-shrink, and flex-basis.	Try It
align-self	Sets the alignment of a specific flex item along the cross-axis.	Try It
order	Used to specify the order in which flex items appear inside their flex container.	Try It

What is CSS Flexbox?

Table of Contents

Elements of Flexbox

Basic Flexbox Layout

Example

Vertical Flexbox Layout

Example

Flexbox Justify Content Property

Flexbox Align Items Property

Centering a Div using Flexbox

Example

Flexbox Wrap Property

Flexbox Align Self Property

CSS Flexbox Container Properties

CSS Flexbox Items Properties

Comments

Leave a Reply Cancel reply

More posts

Deficit Financing and Public Debt?

What are the main types of Unemployment?

Fiscal Policy vs Monetary Policy?

Nominal GDP and Real GDP?