CODEWITHSUNDEEP
cssflexbox
Alan Dev
Alan Dev

Reputation: 53

Flexbox within a container ignoring justify-content

I want two divs within a flexible container to take up 60% of the space and 30% respectively with even space around them however they are crunched up with no space.

html
<!doctype html>
<html lang="en">
<head>
<title>gameplan.org.uk | A site for enthusiasts by enthusiasts.        
</title>

<link href="test.css" rel="stylesheet">

</head>

<header>Header</header>
<div id='main'>
<article>Player Page
<p>
<div class='playercontainer'>
<div class='playerbox1'>Player Summary</div>
<div class='playerbox2'>Player Details</div>
</div>
</p>
</article>
<nav>Menu</nav>
<aside>Stuff</aside>
</div>
<footer>Footer</footer>
</body>

and the css:-

body {
font: 24px Helvetica;
background: #999999;
color:rgba(0,0,0,.25);
}

#main {
min-height: 800px;
margin: 0px;
padding: 0px;
display: -webkit-flex;
display:                 flex;
-webkit-flex-flow: row;
flex-flow: row;        
}

#main > article {
margin: 4px;
padding: 5px;
border: 1px solid #cccc33;
border-radius: 7pt;
background: #dddd88;
-webkit-flex: 3 1 60%;
flex: 3 1 60%;
-webkit-order: 2;
order: 2;
}

#main > nav {
margin: 4px;
padding: 5px;
border: 1px solid #8888bb;
border-radius: 7pt;
background: #ccccff;
-webkit-flex: 1 6 20%;
flex: 1 6 20%;
-webkit-order: 1;
order: 1;
}

#main > aside {
margin: 4px;
padding: 5px;
border: 1px solid #8888bb;
border-radius: 7pt;
background: #ccccff;
-webkit-flex: 1 6 20%;
flex: 1 6 20%;
-webkit-order: 3;
order: 3;
}

header, footer {
display: block;
margin: 4px;
padding: 5px;
min-height: 100px;
border: 1px solid #eebb55;
border-radius: 7pt;
background: #ffeebb;
}

/* Too narrow to support three columns */
@media all and (max-width: 640px) {

#main, #page {
-webkit-flex-flow: column;
flex-flow: column;
}

#main > article, #main > nav, #main > aside {
/* Return them to document order */
-webkit-order: 0;
order: 0;
}

#main > nav, #main > aside, header, footer {
min-height: 50px;
max-height: 50px;
}
}


/*On the flex container*/
.playercontainer {
webkit-inline-flex; /* Safari */
display: inline-flex;     
-webkit-flex-flow: row;
flex-flow: row;
-webkit-flex-wrap: wrap; /* Safari */
flex-wrap: wrap;
-webkit-justify-content: space-around; /* Safari */
justify-content: space-around;
-webkit-flex: 3 1 100%;
flex: 3 1 0%;
}

.playerbox1 {
border-style: solid;
border-color: #0000ff;
-webkit-order: 1; /* Safari */
order: 1;
-webkit-flex: 3 1 60%;
flex: 3 1 60%;
}


.playerbox2 {
border-style: solid;
border-color: #ff0000;
-webkit-flex: 1 1 30%; /* Safari */
flex: 1 1 30%;
-webkit-order: 1; /* Safari */
order: 1;
}

I'm sure there's something simple I'm missing but I can't work out what. You can see the code live here 1

Upvotes: 2

Views: 2895

Answers (2)

kevinB
kevinB

Reputation: 52

Make a couple small changes to .playerContainer. Remove the 2 lines for justify-content and add a width:100%

 .playercontainer {
    webkit-inline-flex; /* Safari */
    display: inline-flex;     
    -webkit-flex-flow: row;
    flex-flow: row;
    -webkit-flex-wrap: wrap; /* Safari */
    flex-wrap: wrap;
    -webkit-flex: 3 1 100%;
    flex: 3 1 0%;
    width:100%;
}

enter image description here

Upvotes: 1

m4n0
m4n0

Reputation: 32275

You need to check two things in flexbox here

  1. Change display: inline-flex to display: flex as inline doesn't take the parent container width but content width.

  2. Set flex-grow and flex-shrink to 0 since flex-basis already takes care of the expansion(width coverage).

Modified CSS

.playercontainer {
  display: flex;     
}

.playerbox1 {
  flex-basis: 60%;
}

.playerbox2 {
  flex-basis: 30%;
}

Output:

body {
    font: 24px Helvetica;
    background: #999999;
    color: rgba(0, 0, 0, .25);
  }
  #main {
    min-height: 800px;
    margin: 0px;
    padding: 0px;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row;
    flex-flow: row;
  }
  #main > article {
    margin: 4px;
    padding: 5px;
    border: 1px solid #cccc33;
    border-radius: 7pt;
    background: #dddd88;
    -webkit-flex: 3 1 60%;
    flex: 3 1 60%;
    -webkit-order: 2;
    order: 2;
  }
  #main > nav {
    margin: 4px;
    padding: 5px;
    border: 1px solid #8888bb;
    border-radius: 7pt;
    background: #ccccff;
    -webkit-flex: 1 6 20%;
    flex: 1 6 20%;
    -webkit-order: 1;
    order: 1;
  }
  #main > aside {
    margin: 4px;
    padding: 5px;
    border: 1px solid #8888bb;
    border-radius: 7pt;
    background: #ccccff;
    -webkit-flex: 1 6 20%;
    flex: 1 6 20%;
    -webkit-order: 3;
    order: 3;
  }
  header,
  footer {
    display: block;
    margin: 4px;
    padding: 5px;
    min-height: 100px;
    border: 1px solid #eebb55;
    border-radius: 7pt;
    background: #ffeebb;
  }
  /* Too narrow to support three columns */
  @media all and (max-width: 640px) {
    #main,
    #page {
      -webkit-flex-flow: column;
      flex-flow: column;
    }
    #main > article,
    #main > nav,
    #main > aside {/* Return them to document order */
      -webkit-order: 0;
      order: 0;
    }
    #main > nav,
    #main > aside,
    header,
    footer {
      min-height: 50px;
      max-height: 50px;
    }
  }
/*On the flex container*/
  .playercontainer {
    
   
    display: flex;
    -webkit-flex-flow: row;
    flex-flow: row;
    -webkit-flex-wrap: wrap;/* Safari */
    flex-wrap: wrap;
    -webkit-justify-content: center;/* Safari */
    justify-content: center;
    -webkit-justify-content: space-around;/* Safari */
    justify-content: space-around;
  }
  .playerbox1 {
    border-style: solid;
    border-color: #0000ff;
    -webkit-order: 1;/* Safari */
    order: 1;
    -webkit-flex: 0 0 60%;
    flex: 0 0 60%;
  }
  .playerbox2 {
    border-style: solid;
    border-color: #ff0000;
    -webkit-flex: 1 1 30%;
    /* Safari */
    flex: 0 0 30%;
    -webkit-order: 1;
    /* Safari */
    order: 1;
  }
<!doctype html>
<html lang="en">

<head>
  <title>gameplan.org.uk | A site for enthusiasts by enthusiasts.
  </title>

  <link href="test.css" rel="stylesheet">

</head>

<header>Header</header>
<div id='main'>
  <article>Player Page
    <p>
      <div class='playercontainer'>
        <div class='playerbox1'>Player Summary</div>
        <div class='playerbox2'>Player Details</div>
      </div>
    </p>
  </article>
  <nav>Menu</nav>
  <aside>Stuff</aside>
</div>
<footer>Footer</footer>
</body>

Upvotes: 3

Related Questions