Flex doesnt center the content

Issue

.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?

Solution

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;
}

Answered By - sari