html - 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

此 CSS 的失败是 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>