CODEWITHSUNDEEP
htmlcssflexbox
HappyHands31
HappyHands31

Reputation: 4101

Horizontally Distribute Inner-Divs of 3-Column Container Without Using Percentages? - Flex

I'm wondering if there's a better way to evenly space the three divs within a parent div (horizontally) using flex. Here's what I have:

.container {
    display: flex;
}
.left-div, .middle-div, .right-div {
    display: flex;
    justify-content: center;
    width: 33.3%;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Demo</title>
</head>
<body>
    <div class="container">
        <div class="left-div">
            Left
        </div>
        <div class="middle-div">
            Middle
        </div>
        <div class="right-div">
            Right
        </div>
    </div>
</body>
</html>

As you can see, I set each child-div / column to width: 33.3% - is there a CSS property that will automatically force them to span 100% width of their parent, collectively, without using percentages?

If I get rid of width: 33%, I get this:

.container {
        display: flex;
}
.left-div, .middle-div, .right-div {
        display: flex; 
        justify-content: center;
        /*width: 33.3%;*/
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Demo</title>
</head>
<body>
    <div class="container">
        <div class="left-div">
            Left
        </div>
        <div class="middle-div">
            Middle
        </div>
        <div class="right-div">
            Right
        </div>
    </div>
</body>
</html>

I also tried setting the parent div to justify-content: space-between;, but this is now forcing the content of the inner divs to get aligned to the left (for the left div) or to the right (for the right div):

.container {
        display: flex;
        justify-content: space-between;
}
.left-div, .middle-div, .right-div {
        display: flex; 
        justify-content: center;
        /*width: 33.3%;*/
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Demo</title>
</head>
<body>
    <div class="container">
        <div class="left-div">
            Left
        </div>
        <div class="middle-div">
            Middle
        </div>
        <div class="right-div">
            Right
        </div>
    </div>
</body>
</html>

I know that setting each child div to width: 33% works, but is there a better way? Without having to calculate percentages if I wanted 7 columns, for example?

Upvotes: 0

Views: 40

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 105923

flex-grow might be what you need here .

The flex-grow CSS property sets the flex grow factor of a flex item main size. It specifies how much of the remaining space in the flex container should be assigned to the item (the flex grow factor).

.container {
    display: flex;
}
.left-div, .middle-div, .right-div {
    display: flex;
    justify-content: center;
    flex-grow:1;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Demo</title>
</head>
<body>
    <div class="container">
        <div class="left-div">
            Left
        </div>
        <div class="middle-div">
            Middle
        </div>
        <div class="right-div">
            Right
        </div>
    </div>
</body>
</html>

Upvotes: 1

Balastrong
Balastrong

Reputation: 4464

You're almost there, just try with justify-content: space-around;

As a plus, I'd recommend you have a look at this guide for a lot of interesting flexbox explanations :)

.container {
        display: flex;
        justify-content: space-around;
}
.left-div, .middle-div, .right-div {
        display: flex; 
        justify-content: center;
        /*width: 33.3%;*/
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Demo</title>
</head>
<body>
    <div class="container">
        <div class="left-div">
            Left
        </div>
        <div class="middle-div">
            Middle
        </div>
        <div class="right-div">
            Right
        </div>
    </div>
</body>
</html>

Upvotes: 1

Related Questions