Positioning content inside a flexbox container with CSS

Published: 25 Apr 2019 · Reading time: 16 min

This article will cover the approach that uses CSS flexbox property for positioning a content inside a container element.

Before we dive in I want to specify that the content might be another element or content as it is e.g. text. I’ll provide examples for both.

Note: The following examples are going to feature a single element inside a flexbox container, for the sake of demonstrating the positioning capabilities of a flexbox property.

Flexbox property allows you to set content in 9 main positions:

Top Left;
Top Center;
Top Right;
Center Left;
Center Center;
Center Right;
Bottom Left;
Bottom Center;
Bottom Right.

Note: The amount of values of CSS flexbox related properties allows to set more than 9 positions. I’m just going to cover 9 most popular ones!

Container with a content element

To start off, the HTML is the basic container with a content element inside:

<div class="content-container">
  <span>Element with text content</span>
</div>

To give some visual aid let’s add some basic CSS:

.content-container {
  background: lightgreen;
}

.content-container span {
  background: lightcoral;
}

Result:

Element with text content

In order to set content in all 9 positions, a content container must have a width and height property greater than the content itself.

The width by default is equal to 100% if the container’s display property is set to flex. The height, however, is dependent either on the content’s height(some of the items might be higher than others) or it can be set manually.

The flex-direction property is optional, however, it might affect the further positioning of the content.

The flex-direction CSS property sets how flex items are placed in the flex container defining the main axis and the direction
—MDN

CSS:

.content-container {
  background: lightgreen;
  height: 100px;
  display: flex;
  flex-direction: row;
}

Result:

Element with text content

For the flex-direction: row the horizontal positioning is set with justify-content property.

For the flex-direction: row the vertical positioning is set with align-items property.

For the flex-direction: column the horizontal positioning is set with align-items property.

For the flex-direction: column the vertical positioning is set with justify-content property.

The values for the justify-content and align-items properties are the same:

flex-start - for horizontal it’s left, for vertical it’s top;
center - for horizontal it’s center, for vertical it’s center;
flex-end - for horizontal it’s right, for vertical it’s bottom.

Top Left position:

.content-container {
  background: lightgreen;
  height: 100px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start; /* horizontal position */
  align-items: flex-start; /* vertical position */
}

Result:

Element with text content

Top Center position:

.content-container {
  background: lightgreen;
  height: 100px;
  display: flex;
  flex-direction: row;
  justify-content: center; /* horizontal position */
  align-items: flex-start; /* vertical position */
}

Result:

Element with text content

Top Right position:

.content-container {
  background: lightgreen;
  height: 100px;
  display: flex;
  flex-direction: row;
  justify-content: flex-end; /* horizontal position */
  align-items: flex-start; /* vertical position */
}

Result:

Element with text content

Center Left position:

.content-container {
  background: lightgreen;
  height: 100px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start; /* horizontal position */
  align-items: center; /* vertical position */
}

Result:

Element with text content

Center Center position:

.content-container {
  background: lightgreen;
  height: 100px;
  display: flex;
  flex-direction: row;
  justify-content: center; /* horizontal position */
  align-items: center; /* vertical position */
}

Result:

Element with text content

Center Right position:

.content-container {
  background: lightgreen;
  height: 100px;
  display: flex;
  flex-direction: row;
  justify-content: flex-end; /* horizontal position */
  align-items: center; /* vertical position */
}

Result:

Element with text content

Bottom Left position:

.content-container {
  background: lightgreen;
  height: 100px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start; /* horizontal position */
  align-items: flex-end; /* vertical position */
}

Result:

Element with text content

Bottom Center position:

.content-container {
  background: lightgreen;
  height: 100px;
  display: flex;
  flex-direction: row;
  justify-content: center; /* horizontal position */
  align-items: flex-end; /* vertical position */
}

Result:

Element with text content

Bottom Right position:

.content-container {
  background: lightgreen;
  height: 100px;
  display: flex;
  flex-direction: row;
  justify-content: flex-end; /* horizontal position */
  align-items: flex-end; /* vertical position */
}

Result:

Element with text content

Container with a pure content (text)

This time the container element will contain pure content (text):

<button class="button-container">Hello World</button>

Again to give some visual aid let’s add some basic CSS:

.button-container {
  border: none;
  border-radius: 0;
  padding: 0;
  background: deeppink;
  color: white;
  font-size: 16px;
  cursor: pointer;
}

Result:

Because we use the button element for this example, I’m going to set the display property to inline-flex value. As well as set the flex-direction property with a value of column which will allow to position content vertically.

Also since the button is stripped out of the default styles, its size is matching its content, so I’ll add a width and height properties to give some room for the content.

.button-container {
  border: none;
  border-radius: 0;
  padding: 0;
  background: deeppink;
  color: white;
  font-size: 16px;
  
  width: 140px;
  height: 45px;

  display: inline-flex;
  flex-direction: column;
}

Result:

Button content Top Left position:

.button-container {
  border: none;
  border-radius: 0;
  padding: 0;
  background: deeppink;
  color: white;
  font-size: 16px;
  
  width: 140px;
  height: 45px;

  display: inline-flex;
  flex-direction: column;

  justify-content: flex-start; /* vertical position */
  align-items: flex-start; /* horizontal position */
}

Result:

Button content Top Center position:

.button-container {
  border: none;
  border-radius: 0;
  padding: 0;
  background: deeppink;
  color: white;
  font-size: 16px;
  
  width: 140px;
  height: 45px;

  display: inline-flex;
  flex-direction: column;

  justify-content: flex-start; /* vertical position */
  align-items: center; /* horizontal position */
}

Result:

Button content Top Right position:

.button-container {
  border: none;
  border-radius: 0;
  padding: 0;
  background: deeppink;
  color: white;
  font-size: 16px;
  
  width: 140px;
  height: 45px;

  display: inline-flex;
  flex-direction: column;

  justify-content: flex-start; /* vertical position */
  align-items: flex-end; /* horizontal position */
}

Result:

Button content Center Left position:

.button-container {
  border: none;
  border-radius: 0;
  padding: 0;
  background: deeppink;
  color: white;
  font-size: 16px;
  
  width: 140px;
  height: 45px;

  display: inline-flex;
  flex-direction: column;

  justify-content: center; /* vertical position */
  align-items: flex-start; /* horizontal position */
}

Result:

Button content Center Center position:

.button-container {
  border: none;
  border-radius: 0;
  padding: 0;
  background: deeppink;
  color: white;
  font-size: 16px;
  
  width: 140px;
  height: 45px;

  display: inline-flex;
  flex-direction: column;

  justify-content: center; /* vertical position */
  align-items: center; /* horizontal position */
}

Result:

Button content Center Right position:

.button-container {
  border: none;
  border-radius: 0;
  padding: 0;
  background: deeppink;
  color: white;
  font-size: 16px;
  
  width: 140px;
  height: 45px;

  display: inline-flex;
  flex-direction: column;

  justify-content: center; /* vertical position */
  align-items: flex-end; /* horizontal position */
}

Result:

Button content Bottom Left position:

.button-container {
  border: none;
  border-radius: 0;
  padding: 0;
  background: deeppink;
  color: white;
  font-size: 16px;
  
  width: 140px;
  height: 45px;

  display: inline-flex;
  flex-direction: column;

  justify-content: flex-end; /* vertical position */
  align-items: flex-start; /* horizontal position */
}

Result:

Button content Bottom Center position:

.button-container {
  border: none;
  border-radius: 0;
  padding: 0;
  background: deeppink;
  color: white;
  font-size: 16px;
  
  width: 140px;
  height: 45px;

  display: inline-flex;
  flex-direction: column;

  justify-content: flex-end; /* vertical position */
  align-items: center; /* horizontal position */
}

Result:

Button content Bottom Right position:

.button-container {
  border: none;
  border-radius: 0;
  padding: 0;
  background: deeppink;
  color: white;
  font-size: 16px;
  
  width: 140px;
  height: 45px;

  display: inline-flex;
  flex-direction: column;

  justify-content: flex-end; /* vertical position */
  align-items: flex-end; /* horizontal position */
}

Result:

Tags:

⟨ Previous
Modern button styles in web design Next ⟩
Text overflow ellipsis on select tag