#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2003
    Location
    Shady Grove
    Posts
    98
    Rep Power
    17

    flexbox layout and centering flexItem on page


    Hi all, I'm trying to center a flex-item (div) on the page and everything I've tried seems not to work.
    I'm just experimenting with flexbox before updating a couple of sites and this one issue is slowing me down.

    A live example of the web page layout can be found here: Catering2order Kitchen Stock Manager
    I'm trying to center the navy div

    Thanks

    The CSS is:

    html, body {
    font: 62.5%/1.4 verdana,ariel,sans-serif;
    background: #f5dadb;
    height: 100%;
    width: 100%;
    }


    /* Styling to keep footer at bottom of page using flexbox */
    body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    }

    main {
    flex-grow: 1;
    background: yellow;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    }

    header, main, footer {
    flex-shrink: 0;
    }

    div {
    flex-grow: 1;
    max-width: 160em;

    background: navy;
    }

    header {
    background: #931510;
    min-height: 14em;
    }

    footer {
    min-height: 4em;
    background: green;
    }
  2. #2
  3. Lord of the Dance
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Oct 2003
    Posts
    4,206
    Rep Power
    2012
    Where in your page do you use that code with navy backgorund?

IMN logo majestic logo threadwatch logo seochat tools logo