Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Center Entire Flexbox

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #287017
    smaddox42
    Participant

    Is there a way to center an entire flex box as one unit? For example I have a section setup using flexbox, there are three flex items. My goal is to have everything centered on the page with equal distance between the three flex items. I sort of almost have it. Everything is centered on the page but for some reason the space between the first flex item and second flex item is greater than the space between the second and third item and I don’t know why. I’ve also tried changing justify-content to space-between or space-around but this doesn’t fix the distance issue.This is what I currently have:

    .aboutme-flex {
    display: flex;
    height: 600px;
    width: 100%;
    justify-content: center;
    margin: 20px;
    }

    .aboutme-left {
    width: 20%;
    height: auto;
    }

    .aboutme-left img {
    width: 100%;
    height: auto;
    max-height: 550px;
    max-width: 350px;
    border:1px solid black;
    }

    .aboutme-middle {
    width: 40%;
    height: auto;
    text-align: justify;
    margin-right: 50px;
    margin-left: 50px;
    }

    .aboutme-right {
    width: 20%;
    height: 80%;
    background-color: #D1D2D5;
    border:1px solid black;
    padding: 30px;
    max-height: 550px;
    max-width: 350px;

    #287022
    Paulie_D
    Member

    A Codepen demo would be more use than a small piece of CSS

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.