css - 我在定位带有列的 flexbox 列表行时遇到问题

Question

由于某种原因，我正在尝试创建一个响应式 flexbox 行，其中列在列表中，它永远不会完全集中在网页上。毫无疑问，它的左侧总是有太多的空间。我不知道为什么，而且我的选择已经用完了，现在有一个具体要做什么的教程。谁能教我如何在一行中创建三列等高并直接在中心？

.flex-container {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
}

.box {
  width: 100%;
  max-width: 1700px;
  height: 500px;
  margin: 0 auto;
  border: 1px solid #c3c3c3;
  border-radius: 6px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.box>* {
  flex: 1 1 auto;
}


/* Hero */

.list {
  display: flex;
  flex-wrap: wrap;
}

.list-item {
  display: flex;
  width: 100%;
}

.list-content {
  display: flex;
  flex-direction: column;
  padding: 1em;
  width: 100%;
}

.list-content p {
  flex: 1 0 auto;
}

.flex-container .list {
  width: 100%;
  max-width: 1700px;
}

@media all and (max-width: 640px) {
  .hero {
    margin-bottom: 80px;
  }
  .flex-container .list {
    width: 100%;
    max-width: 100px;
  }
}

@media all and (min-width: 640px) {
  .list-item {
    width: 100%;
  }
  .hero {
    margin: 0 50px 0 0;
  }
  .flex-container .list {
    width: 100%;
    max-width: 760px;
  }
}

@media all and (min-width: 960px) {
  .list-item {
    width: 33.33%;
  }
  .flex-container .list {
    width: 100%;
    max-width: 1700px;
  }
}

.hero {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 700px;
}

.hero .box {
  width: 100%;
  height: 100%;
  max-height: 500px;
}

<section class="hero" id="intro">
  <div class="flex-container column">
    <h2>What Is Our App?</h2>
    <ul class="list">
      <li class="list-item">
        <div class="list-content box">
          <h3>Buy and Sell New and Old Technology</h3>
          <p>Trade in your eligible device in secure, friendly marketplace with less fees than current competitors. Our app allows for the latest in technology from mobile devices, to cameras, to laptops.
          </p>
        </div>
      </li>
      <li class="list-item">
        <div class="list-content box">
          <h3>Power to the People</h3>
          <p> On our App, users buy and sell directly to other users. Without a middleman our community is able to offer the best prices at the highest value possible.
          </p>
        </div>
      </li>
      <li class="list-item">
        <div class="list-content box">
          <h3> Fast Shipping and No Broken Products</h3>
          <p>To keep the marketplace up to shape, our app forbides the buying and selling of broken items. Every product lists requirements and goes through an approval process to ensure shopping is done with the knowledge that only the best is on display.
            Shipping is fast and accurate to the address buyers input before proceeding to making a purchase.
          </p>
        </div>
      </li>
    </ul>
  </div>
</section>

Answer 1

具体来说，在您的示例中，左填充应用了 ul元素。

它来自用户代理的浏览器样式表。

你可以简单地覆盖它，就像它是一个普通的 css ul 样式:

ul {
  padding: 0;
}

或在您的 .list-item 内选择器:

.list-item {
  padding: 0;
  // ...
}