Атрибуты родительского элемента Flexbox не работают (выравнивание содержимого, выравнивание содержимого, выравнивание элементов)

Question

Я использую Flexbox в своем веб-проекте. Я был в состоянии использовать его успешно раньше, но у меня, очевидно, есть какой-то стиль или структура, которая мешает Flexbox делать это в этом случае.

Похоже, что все атрибуты justify-content, align-items и align-content ничего не делают. Но flex-direction и flex-wrap действительно работают.

Соответствующие 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> 

Соответствующий 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); 
    } 

Я Есть:

Что я хочу:

Answer 1

Провал этой CS S - margin:auto; - .flexy. Снимите это и замените на margin:5px 10px;.

Попробуйте следующий пример (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>

Answer 2

Выглядит как

.flexy { 
    margin:auto; 

}

является виновником. При этом каждый элемент просто станет своего рода «естественным» центром против доступного горизонтального пространства.

Вы также можете играть с шириной .category-container. Его ширина по крайней мере частично определит, сколько из ваших .flexy вы будете иметь в каждой строке.

Вы могли бы дать .category-container ширину какой-то, а затем дать этоmargin: 0 auto, чтобы он горизонтально по центру по отношению к странице.