Question

我在我的网络项目中使用Flexbox。我以前能够成功使用它，但我显然有某种样式或结构阻碍了Flexbox在这种情况下做的事情。

似乎justify-content，align-items和align-content属性都无效。但flex-direction和flex-wrap确实有效。

相关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>

Answer 2

看起来像

.flexy {
   margin:auto;

}

是罪魁祸首。有了它，每个项目都会变得有点自然而且＃34;以可用的水平空间为中心。

您可能还想使用.category-container的宽度。它的宽度至少部分地决定了你每行中.flexy的数量。

您可以为.category-container提供某种宽度，然后将 it margin: 0 auto设置为使其水平居中于页面。

Flexbox父属性不起作用（align-content，justify-content，align-items）

2 个答案: