Question

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

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

＆＃13;

/* 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;
}

＆＃13;

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

＆＃13;

Answer 1

不，您无法在display: flex上设置containter，gallery / galleryproducts的孩子就像现在一样，因为他们不是指导container的孩子。

如果你改变它，那么boxes / latest将成为flex个孩子，而gallery / galleryproducts的孩子将会只是成为正常的li物品，堆叠在彼此之上，而不是并排。

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

容器Flexbox项目

1 个答案: