justify-content property isn t working

Question

I have an odd issue that I m having trouble with  So I ve been working on this prototype html5 template that uses flexbox  Though I ve been running into one slight problem  I m trying to a small space to the sidebar and content area of the template by applying the  justify-content  property to the parent div  Though it s not adding that space between the sidebar and content area  I m not sure what it is that I m doing wrong  So if any could help me that would be great  Thanks in advance   Here s my html    lt  DOCTYPE html gt   lt html lang  en  gt   lt head gt       lt meta charset  utf-8  gt       lt meta name  viewport  content  width device-width  gt       lt script src    ajax googleapis com ajax libs jquery 1 11 0 jquery min js  gt  lt  script gt       lt script src     scripts javascript responsive drop down js  gt  lt  script gt       lt link href     css protoflexcss css  rel  stylesheet  type  text css  media  screen   gt       lt title gt Welcome to My Domain lt  title gt   lt  head gt   lt body gt               lt header gt               lt h1 gt This is a placeholder  lt br   gt                  for header lt  h1 gt           lt  header gt               lt nav class  main  gt                   lt div class  mobilmenu  gt  lt  div gt                       lt ul gt                           lt li gt  lt a href     gt Home lt  a gt  lt  li gt                           lt li gt  lt a href     gt Video lt  a gt  lt  li gt                           lt li gt  lt a href     gt Pictures lt  a gt  lt  li gt                           lt li gt  lt a href     gt Audio lt  a gt  lt  li gt                           lt li gt  lt a href     gt Other Work lt  a gt  lt  li gt                           lt li gt  lt a href     gt About Me lt  a gt  lt  li gt                           lt li gt  lt a href     gt Contact Me lt  a gt  lt  li gt                       lt  ul gt                   lt  nav gt               lt div id  wrapper  gt                   lt article class  content-main  gt                       lt section gt                           lt h2 gt Heading goes here    lt  h2 gt                           lt time datetime  2014-05-21T02 43 00  gt Officialy Posted On May 21 lt sup gt st lt  sup gt  2 35 A M  lt  time gt                           lt p gt Content will go here    lt  p gt                       lt  section gt                   lt  article gt                   lt aside gt                       lt p gt More content soon    lt  p gt                   lt  aside gt           lt  div gt           lt footer gt                   lt div class  copyright  gt                       lt span gt All rights reserved 2014  lt  span gt                   lt  div gt               lt nav class  foot  gt                   lt ul gt                       lt li gt  lt a href     gt Home lt  a gt  lt  li gt                       lt li gt  lt a href     gt Video lt  a gt  lt  li gt                       lt li gt  lt a href     gt Pictures lt  a gt  lt  li gt                       lt li gt  lt a href     gt Audio lt  a gt  lt  li gt                       lt li gt  lt a href     gt Other Work lt  a gt  lt  li gt                       lt li gt  lt a href     gt About Me lt  a gt  lt  li gt                       lt li gt  lt a href     gt Contact Me lt  a gt  lt  li gt                   lt  ul gt               lt  nav gt           lt  footer gt                     lt  body gt   lt  html gt    Here s the relevent css    wrapper   display  flex  flex-direction  row  justify-content  space-around  flex-flow  row wrap  flex  1 100   width 92 5   align-self  center  padding-top  3 5em  padding-bottom  2 5em  margin  0      wrapper article content-main   flex  6  order  2      wrapper article content-main section   background-color  rgba 149  21  130  0 61   border  2px solid  c31cd9  padding  0 9em      wrapper aside   flex  1  padding  0 4em  background-color  rgba 17  208  208  0 56   border  2px solid  15d0c3  position  sticky      NOTE  If anyone needs any other piece of my css code relating to any of other elements of my html please let me know  and I will happily add it into the question as well

User · Accepted Answer

justify-content only has an effect if there s space left over after your flex items have flexed to absorb the free space   In most many cases  there won t be any free space left  and indeed justify-content will do nothing   Some examples where it would have an effect    if your flex items are all inflexible  flex  none or flex  0 0 auto   and smaller than the container  if your flex items are flexible  BUT can t grow to absorb all the free space  due to a max-width on each of the flexible items    In both of those cases  justify-content would be in charge of distributing the excess space   In your example  though  you have flex items that have flex  1 or flex  6 with no max-width limitation  Your flexible items will grow to absorb all of the free space  and there will be no space left for justify-content to do anything with

User · Answer

This answer might be stupid  but I spent quite some time to figure it out   What happened to me was I didn t set display  flex to the container  And of course  justify-content won t work without a container with that property

User · Answer

Go to inspect element and check if  justify-content-center is listed as a class name under  Styles  tab  If not  probably you are using bootstrap v3 in which justify-content-center is not defined    If so  please update bootstrap  worked for me

User · Answer

I was having a lot of problems with justify-content  and I figured out the problem was  margin  0 auto   The auto part overrides the justify-content so its always displayed according to the margin and not to the justify-content

User · Answer

I had a further issue that foxed me for a while when theming existing code from a CMS  I wanted to use flexbox with justify-content space-between but the left and right elements weren t flush    In that system the items were floated and the container had a  before and or an  after to clear floats at beginning or end  So setting those sneaky  before and  after elements to display none did the trick

[css] justify-content property isn't working

Examples related to css

Examples related to flexbox

Examples related to spacing

Examples related to article