Search code examples
htmlcssalignmentflexbox

How to align items in the flexbox?

I would like child elements with a fixed width and height to be placed in flexbox one by one with a small indentation between them and a parent element to be centered, but not centering it's child elements.

All my attempts to force the parent element to be centered and stop centering it's child elements failed, among them:

align-self: center;
margin: 0 auto;
justify-content: space-between;

Here is the link for a preview. All I need is parent element to be centered.

Just like that

justify-content: center; aligns parent div, but I dont want last row (if it isn't completely filled with elements) to be centered.

So how can I do that? Thank you in advance.

Solution

  • Use justify-content: center; on the parent .grid-view.

    Have a look at this snippet below:

    .grid-view {
    display: flex;
    padding: 0px;
    margin: 0px;
    align-self: center;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
}

.grid-view .item {
    flex-shrink: 1;
    margin: 5px;
    border: 1px solid #333;
    align-self: flex-start;
}

.grid-view .item .item-cover {
    width: 200px;
    border: 3px solid #006699;
    border-radius: 3px;
}
    <div class="grid-view"> 
    <div class="item">
        <img class="item-cover" alt="attēls" src="https://pbs.twimg.com/profile_images/660946436801101824/niM7azZS.jpg" />
        <h2 class="item-title">{{Title}}</h2>
        <p class="item-description">{{item description}}</p>
    </div>
    <div class="item">
        <img class="item-cover" alt="attēls" src="https://pbs.twimg.com/profile_images/660946436801101824/niM7azZS.jpg" />
        <h2 class="item-title">{{Title}}</h2>
        <p class="item-description">{{item description}}</p>
    </div>
    <div class="item">
        <img class="item-cover" alt="attēls" src="https://pbs.twimg.com/profile_images/660946436801101824/niM7azZS.jpg" />
        <h2 class="item-title">{{Title}}</h2>
        <p class="item-description">{{item description}}</p>
    </div>
    <div class="item">
        <img class="item-cover" alt="attēls" src="https://pbs.twimg.com/profile_images/660946436801101824/niM7azZS.jpg" />
        <h2 class="item-title">{{Title}}</h2>
        <p class="item-description">{{item description}}</p>
    </div>
    <div class="item">
        <img class="item-cover" alt="attēls" src="https://pbs.twimg.com/profile_images/660946436801101824/niM7azZS.jpg" />
        <h2 class="item-title">{{Title}}</h2>
        <p class="item-description">{{item description}}</p>
    </div>
    <div class="item">
        <img class="item-cover" alt="attēls" src="https://pbs.twimg.com/profile_images/660946436801101824/niM7azZS.jpg" />
        <h2 class="item-title">{{Title}}</h2>
        <p class="item-description">{{item description}}</p>
    </div>
    <div class="item">
        <img class="item-cover" alt="attēls" src="https://pbs.twimg.com/profile_images/660946436801101824/niM7azZS.jpg" />
        <h2 class="item-title">{{Title}}</h2>
        <p class="item-description">{{item description}}</p>
    </div>
    <div class="item">
        <img class="item-cover" alt="attēls" src="https://pbs.twimg.com/profile_images/660946436801101824/niM7azZS.jpg" />
        <h2 class="item-title">{{Title}}</h2>
        <p class="item-description">{{item description}}</p>
    </div>
</div>

    Hope this helps!