html - 容器 Flexbox 元素

Question

我使用两个 flex 容器创建了一个小网站，结果很好。是否可以通过在容器类上仅使用一个 flexbox 容器来实现相同的结果？

我一直在尝试这样做，但它不起作用，我不想同时拥有两个 flexbox 容器。

/* Framework.css */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
body {
    font-family: 'Electrolize', sans-serif;
}
.container {
    max-width: 940px;
    margin: 0 auto;
    padding: 0 5%;
}
.gallery {
    display: flex;
}
.gallery li {
    width: 200px;
    background-color: #1c1c1c;
    color: #bdc3c7;
    margin: 0% 0.5% 0% 0.5%;
}
.gallery img {
    width: 100%;
    height: auto;
}
.gallery p {
    margin: 0;
    padding: 6%;
    font-size: 1.25em;
    background-color: #483636;
    color: #bdc3c7;
    text-align: center;
}
.galleryproducts {
    display: flex;
}
.galleryproducts li {
    width: 200px;
    margin: 2%;
}
.galleryproducts img {
    width: 100%;
    height: auto;
    border: 3px solid white;
}
.latest {
    margin-top: 1%;
    background-color: #1c1c1c;
}
.latest h1 {
    color: white;
    font-size: 1.5em;
    font-weight: 300;
    border-bottom: 3px solid white;
    margin-bottom: 5%;
    padding: 2%;
}
a {
    text-decoration: none;
}

<!-- index.html -->
<div class="container">
  <section class="boxes">
    <ul class="gallery">
      <li>
        <a href="img/electrical.png">
          <img src="img/electrical.png" alt="">
          <p>Electrical Installations</p>
        </a>
      </li>
      <li>
        <a href="img/lighting.png">
          <img src="img/lighting.png" alt="">
          <p>Lighting Decorations</p>
        </a>
      </li>
      <li>
        <a href="img/homeappliances1.png">
          <img src="img/homeappliances1.png" alt="">
          <p>Electrical Appliances</p>
        </a>
      </li>
      <li>
        <a href="img/homeappliances2.png">
          <img src="img/homeappliances2.png" alt="">
          <p>Kitchen Appliances</p>
        </a>
      </li>
    </ul>
  </section>
  <section class="latest">
    <h1>Our latest products</h1>
    <ul class="galleryproducts">
      <li>
        <a href="img/1.jpg">
          <img src="img/1.jpg" alt="">
        </a>
      </li>
      <li>
        <a href="img/2.jpg">
          <img src="img/2.jpg" alt="">
        </a>
      </li>
      <li>
        <a href="img/3.jpg">
          <img src="img/3.jpg" alt="">
        </a>
      </li>
      <li>
        <a href="img/4.jpg">
          <img src="img/4.jpg" alt="">
        </a>
      </li>
    </ul>
  </section>
</div>

Answer 1

不，您不能在 container 上设置 display:flex 并拥有 gallery's/galleryproducts 的子级行为与现在一样，因为它们不是 container 的直接子级。

如果你想那样改变它，boxes/latest 将变成 flex children 而 gallery 's/galleryproducts 的子项将变成普通的 li 元素，彼此堆叠，而不是并排。

所以你所拥有的就是你所需要的，得到你说好的结果(如果假设你想使用 flex 当然)。