Horje
How to Center a Flex Container but Left-Align Flex Items?

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:

Table of Content

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:

wrapper-div

Using a Wrapper Div

Using 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: 




Reffered: https://www.geeksforgeeks.org

CSS

Related
How to Create a Navigation Bar with CSS Flexbox? How to Create a Navigation Bar with CSS Flexbox?
How to Prevent Flexbox Shrinking in CSS? How to Prevent Flexbox Shrinking in CSS?
Understanding Fluid Layouts in Web Design, How to Use it? Understanding Fluid Layouts in Web Design, How to Use it?
How to Stretch Elements to Fit the Whole Height of the Browser Window Using CSS? How to Stretch Elements to Fit the Whole Height of the Browser Window Using CSS?
How to Make One Flex Item Full-Width in CSS Flexbox? How to Make One Flex Item Full-Width in CSS Flexbox?

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 41



 

Horje