Flex doesnt center the content

Question

.colum {
    display: flex;
    align-content: center; 
}
.item { 
    width: 300px;
    height: 300px;
    background-color: white;
}

        <div id="flexn">
            <div class="colum cl1">
                <div class="item a1">   
                </div>
                <div class="item a2">
                </div>
                <div class="item a3">
                </div>
            </div>
            <div class="colum cl2">
                <div class="item b1">
                </div>
                <div class="item b2">
                </div>
                <div class="item b3">
                </div>
            </div>
        </div>

I want the content from from both cl1 and cl2 to have different flexes that put the items in the middle, i tried doing this this way but it didn't work, why?

score 1 · Answer 1 · answered Dec 29 '21 at 12:19

1

Should be align items not content.

.colum {
    display: flex;
    align-items: center; 
}

answered Dec 29 '21 at 12:19

Zrelli Majdi

1,204
2
11
16

score 1 · Accepted Answer · answered Dec 29 '21 at 12:34

in case to put them in the middle in x-direction you have to use justify-content: center; and if u want to center them in y-direction u also need align-items: center; but this would only work if u have a height on your colum div.

    .colum {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.item { 
    width: 300px;
    height: 300px;
    background-color: white;
}

this is how it has to look like if u want to put them in the middle of the page.

And if u want to see the results u have to change the background color to any other color so u can see it . And maybe if u put some margin so u can put the items away from each other which makes it more clear. Like this one:

    .colum {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.item { 
    width: 300px;
    height: 300px;
    background-color: rgb(194, 55, 55);
    margin: 20px;
}

score 0 · Answer 3 · answered Dec 29 '21 at 12:38

Try with this:

.colum {
    display: flex;
    justify-content: center;
}
.item { 
    width: 300px;
    height: 300px;
    background-color: white;
    box-shadow: 0 0 4px #ccc;
    text-align: center;
}

<div id="flexn">
    <div class="colum cl1">
        <div class="item a1">rr 
        </div>
        <div class="item a2">rr
        </div>
        <div class="item a3">rr
        </div>
    </div>
    <div class="colum cl2">
        <div class="item b1">rr
        </div>
        <div class="item b2">rr
        </div>
        <div class="item b3">rr
        </div>
    </div>
</div>

Flex doesnt center the content

3 Answers3