Flexbox Parent Attributes Not Working (align-content, justify-content, align-items)

Question

I am using Flexbox in my web project. I've been able to use it successfully before, but I obviously have some sort of styling or structure that is getting in the way of Flexbox doing it's thing in this case.

It appears that the justify-content, align-items, and align-content attributes are all doing nothing. But the flex-direction and flex-wrap are indeed working.

Relevant HTML:

 <div class="category-container">
       <!-- Repeat this section for all the blocks -->
       <div class="flexy">
           <a href="#">
               <div class="categories">
                   <h2>Title</h2>
                   <img src="insertimghere.jpg" />
                   <p>
                      This is an example description. Look at all
                      this information. Wow, such info, very description.
                   </p>
                </div>
           </a>
       </div>
       <!-- Repeat this section for all of the blocks -->
</div>

Relevant CSS:

 /* Parent Div - Flexbox */
    .category-container {
       padding:0 2% 0 2%;
       display:flex;
       flex-direction:row;
       flex-wrap:wrap;
       /* Next three lines have no effect when changed */
       justify-content:flex-start;
       align-items:flex-start;
       align-content:flex-start;
   }

  /* Child Div - Flexbox */
    .flexy {
       margin:auto;
       padding-bottom:30px;
   }

  /* Div inside Flexy */
    .categories {
       width:350px;
       height:420px;
       margin:auto;
       background-color:#fff;
       padding:30px 15px 10px 15px;
       box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
     }

What I Have:

What I Want:

This isn't possible out of the box with flexbox (or any other layout method for that matter), it doesn't have that option. See this for a possible solution - http://stackoverflow.com/questions/34266993/justify-divs-left-in-parent/34267611?noredirect=1#comment56307031_34267611 — Paulie_D, Dec 16 '15 at 18:16
Or this - http://stackoverflow.com/questions/19527104/left-aligned-last-row-in-centered-grid-of-elements — Paulie_D, Dec 16 '15 at 18:21

score 1 · Accepted Answer · answered Dec 16 '15 at 18:27

The failure of this CSS is margin:auto; on .flexy. Remove this and replace with margin:5px 10px; maybe.

Try the following example (https://jsfiddle.net/sebastianbrosch/63fe9t5n/3/):

/* Parent Div - Flexbox */
.category-container {
  padding:0 2% 0 2%;
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  /* Next three lines have no effect when changed */
  justify-content:flex-start;
  align-items:flex-start;
  align-content:flex-start;
}

/* Child Div - Flexbox */
.flexy {
  margin:5px 10px;
  padding-bottom:30px;
}

/* Div inside Flexy */
.categories {
  width:350px;
  height:420px;
  margin:auto;
  background-color:#fff;
  padding:30px 15px 10px 15px;
  box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

<div class="category-container">
  <!-- Repeat this section for all the blocks -->
  <div class="flexy">
    <a href="#">
      <div class="categories">
        <h2>Title</h2>
        <img src="insertimghere.jpg" />
        <p>
          This is an example description. Look at all
          this information. Wow, such info, very description.
        </p>
      </div>
    </a>
  </div>
  <div class="flexy">
    <a href="#">
      <div class="categories">
        <h2>Title</h2>
        <img src="insertimghere.jpg" />
        <p>
          This is an example description. Look at all
          this information. Wow, such info, very description.
        </p>
      </div>
    </a>
  </div>
  <div class="flexy">
    <a href="#">
      <div class="categories">
        <h2>Title</h2>
        <img src="insertimghere.jpg" />
        <p>
          This is an example description. Look at all
          this information. Wow, such info, very description.
        </p>
      </div>
    </a>
  </div>
  <div class="flexy">
    <a href="#">
      <div class="categories">
        <h2>Title</h2>
        <img src="insertimghere.jpg" />
        <p>
          This is an example description. Look at all
          this information. Wow, such info, very description.
        </p>
      </div>
    </a>
  </div>
  <!-- Repeat this section for all of the blocks -->
</div>

That did it! Now I just have to adjust the parent div to center everything on the page. Thanks a bunch. — perkface, Dec 16 '15 at 20:36

score 0 · Answer 2 · answered Dec 16 '15 at 22:31

Looks like

.flexy {
   margin:auto;

}

Is the culprit. With it there, each item is just going to kind of "naturally" center itself against the available horizontal space.

You may also want to play with the width of the .category-container. Its width will at least partly determine how many of your .flexys you'll have in each row.

You could give .category-container a width of some sort, and then give it margin: 0 auto to have it centered horizontally against the page.

Flexbox Parent Attributes Not Working (align-content, justify-content, align-items)

2 Answers2