How to Center a Flex Container but Left-Align Flex Items?
Last Updated :
31 Jul, 2024
When we use CSS Flexbox, we might encounter situations where we want to center a flex container within its parent while keeping the flex items inside it left-aligned. This interface is very common in web design to create balanced and visually appealing interfaces.
Below are different approaches to center a flex container but left-align flex items:
Using "margin: auto" on the Flex Container
The simplest approach is to use margin: auto on the flex container. This method centers the flex container within its parent while the flex items remain left-aligned by default.
Syntax:
.parent {
display: flex;
justify-content: center;
height: 100vh;
}
.flex-container {
display: flex;
margin: auto;
width: 50%;
}
.flex-item {
flex: 1;
}Example: This centers a flex container horizontally and vertically within the viewport while its flex items are left-aligned within the container using HTML and CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Center Flex Container, Left-Align Flex Items</title>
<style>
.parent {
display: flex;
justify-content: center;
height: 100vh;
/* For demonstration purposes */
background-color: #f0f0f0;
}
.flex-container {
display: flex;
margin: auto;
width: 50%;
/* Adjust as needed */
background-color: #333;
}
.flex-item {
color: white;
padding: 10px;
background-color: #555;
border: 1px solid #444;
}
</style>
</head>
<body>
<div class="parent">
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
</div>
</body>
Output:
Using a Wrapper Div
The second approach is to use a wrapper div inside the flex container. This wrapper div can be centered within the parent using flex properties, and the flex items inside the wrapper will remain left-aligned.
Syntax:
.parent {
display: flex;
justify-content: center;
height: 100vh;
}
.wrapper {
display: flex;
width: 50%;
}
.flex-container {
display: flex;
}
.flex-item {
flex: 1;
}Example: This code centres a wrapper horizontally within the viewport, containing a flex container with left-aligned flex items, using HTML and CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Center Flex Container, Left-Align Flex Items</title>
<style>
.parent {
display: flex;
justify-content: center;
height: 100vh;
background-color: #f0f0f0;
}
.wrapper {
display: flex;
width: 50%;
background-color: #333;
}
.flex-container {
display: flex;
}
.flex-item {
color: white;
padding: 10px;
background-color: #555;
border: 1px solid #444;
}
</style>
</head>
<body>
<div class="parent">
<div class="wrapper">
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
</div>
</div>
</body>
</html>
</html>
Output:
Using a Wrapper DivUsing Grid Layout
Using CSS Grid, we can center the flex container and ensure the flex items remain left-aligned within the container.
Syntax:
.parent {
display: grid;
place-items: center;
height: 100vh;
}
.flex-container {
display: flex;
width: 50%;
}
.flex-item {
flex: 1;
}Example: This code centres a flex container horizontally and vertically within the viewport, containing a flex container with left-aligned flex items, using HTML and CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Center Flex Container, Left-Align Flex Items</title>
<style>
.parent {
display: grid;
place-items: center;
height: 100vh;
/* For demonstration purposes */
background-color: #f0f0f0;
}
.flex-container {
display: flex;
width: 50%;
/* Adjust as needed */
background-color: #333;
}
.flex-item {
color: white;
padding: 10px;
background-color: #555;
border: 1px solid #444;
}
</style>
</head>
<body>
<div class="parent">
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
</div>
</body>
</html>
Output:
Using align-self on the Flex Container
We can use align-self: center on the flex container to center it within the parent. This method is useful when the parent itself is a flex container.
Syntax:
.parent {
display: flex;
height: 100vh;
background-color: #f0f0f0;
}
.flex-container {
display: flex;
align-self: center;
width: 50%;
background-color: #333;
}
.flex-item {
color: white;
padding: 10px;
background-color: #555;
border: 1px solid #444;
}Example: This code centres a flex container vertically within the viewport using CSS Flexbox, with the flex items left aligned within the container, and uses HTML and CSS for layout.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Center Flex Container, Left-Align Flex Items</title>
<style>
.parent {
display: flex;
height: 100vh;
background-color: #f0f0f0;
}
.flex-container {
display: flex;
align-self: center;
width: 50%;
/* Adjust as needed */
background-color: #333;
}
.flex-item {
color: white;
padding: 10px;
background-color: #555;
border: 1px solid #444;
}
</style>
</head>
<body>
<div class="parent">
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
</div>
</body>
</html>
Output:
Similar Reads
How to align items at the center of the container using CSS ?
Centering items in a container using CSS involves aligning elements horizontally and vertically within a parent element. This can be done using different CSS properties and techniques, ensuring that the content appears visually centered and balanced within its container. Here are some common approac
2 min read
How to align item baseline of the container ?
In this article, we will learn how to align items to the baseline of the container. There are three types of alignments in CSS, baseline alignment, positional alignment, and distributed alignment. The Baseline alignment is used to align the baselines of boxes across a group of alignment subjects. Th
3 min read
How to align flexbox container into center using JavaScript ?
In this article, we will set the alignment of content using JavaScript. The DOM Style alignContent property is used to align the items of a flexible container when they do not use all available space on the cross-axis.Syntax:object.style.alignContent = "center"Property Value:center: It is used to pl
1 min read
How to align items in a flex container with JavaScript ?
In CSS, the align-items property is used to align elements in a flex container. This can be similarly implemented using JavaScript by selecting the specific element using a selector method and then using the alignItems property to set the alignment. This can be useful in situations where dynamically
2 min read
How to align item to the flex-end in the container using CSS ?
Aligning items to the flex-end in a container using CSS helps create visually appealing layouts by ensuring content is positioned at the end of the container. To align items to the flex-end within a container using CSS, apply the justify-items: flex-end; property to the container. This shifts items
3 min read
How to align-self element positioned at the baseline of the container ?
In this article, we will learn how to self-align an element at the baseline of the container. This can be achieved using the CSS align-self property. This property is a sub-part of the Flexbox module and helps to override the alignment of the specific flex item. To align an element positioned at the
1 min read
How to Set a Flex Container to Match the Width of Its Flex Items?
Flexbox is a powerful layout model in CSS that simplifies the process of designing responsive layouts. One common scenario is needing the flex container to dynamically adjust its width to match the combined width of its flex items. By default, flex containers expand to fill the available space, but
2 min read
How to center elements in a div along a baseline without a container in CSS ?
Centering elements in a div along a baseline without a container can be achieved using various approaches. In this article, we will discuss some of the approaches to achieve this and provide examples for the same. Method 1: Using Flexbox: One of the easiest ways to center elements along a baseline i
4 min read
How to Get a Table Like Row/Column Alignment in a Flexbox ?
Getting a table-like row/column alignment in Flexbox refers to structuring content similarly to traditional tables, but with more flexibility. Flexbox allows items to align in rows and columns dynamically, offering responsive control over spacing, alignment, and positioning, ideal for modern layouts
3 min read
How to flex-start items at the beginning of the container using CSS ?
The flex-start value of the justify-content property allows you to place the items at the start of the container. The flex-start indicates the flex-direction while the start indicates the writing-mode direction. The children of the parent container are allowed to align at the start of the parent con
1 min read