代码之家 › 专栏 › 技术社区 › Barton Lewis

弹性物品之间的神秘空间

flexbox css html

Barton Lewis · 技术社区 · 7 年前

flex-flow 是 row 和的默认值 justify-content flex-start ,我希望第二个分区与第一个分区对齐。

我做错了什么?

html {
  background-color: white;
}

body {
  width: 1300px;
  margin: 0 auto 0;
}

#container {
  width: 500px;
  overflow: hidden;
  margin: 50px auto;
  background: white;
}

.photobanner {
  height: 270px;
  width: 6748px;
  margin-bottom: 80px;
  font-size: 0px;
}

img {
  margin-right: 2px;
}

.flex-container {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-top: 30px;
}

.mission {
  margin: 25px;
  width: 300px;
  height: auto;
}

.mission p {
  font-family: "europa", sans-serif;
  text-align: left;
  font-size: 18px;
  padding: 20px;
  line-height: 125%;
}

.first {
  -webkit-animation: bannermove 60s linear infinite;
  -moz-animation: bannermove 60s linear infinite;
  -ms-animation: bannermove 60s linear infinite;
  -o-animation: bannermove 60s linear infinite;
  animation: bannermove 60s linear infinite;
}

@keyframes "bannermove" {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: -6268px;
  }
}

@-moz-keyframes bannermove {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: -6268px;
  }
}

@-webkit-keyframes "bannermove" {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: -6268px;
  }
}

@-ms-keyframes "bannermove" {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: -6268px;
  }
}

@-o-keyframes "bannermove" {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: -6268px;
  }
}

img {
  margin-right: 2px;
}

<section class="flex-container">
  <div id="container">
    <!-- Each image is 480px by 270px -->
    <div class="photobanner">
      <img class="first" src="https://www.bartonlewis.com/_imagesfilm/scroll_blue.jpg" alt="blue" />
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_23rd_st.jpg" alt="23rd st" />
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_broken_guru.jpg" alt="broken guru" />
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_church_ave.jpg" alt="church ave" />
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_nose.jpg" alt="nose" />
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_pants.jpg" alt="pants" />
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_i_will_miss_you.jpg" alt="i will miss you" />
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_network_reality_stars.jpg" alt="network reality all stars" />
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_kline.jpg" alt="kline" />
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_queen.jpg" alt="queen" />
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_water.jpg" alt="water" />
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_swirls.jpg" alt="swirls" />
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_robins_egg.jpg" alt="robins egg" />
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_ports.jpg" alt="ports" />
    </div>
  </div>
  <div class="mission">
    <p>text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here </p>
  </div>
</section>

1 回复 | 直到 6 年前

Michael Benjamin William Falcon 7 年前

问题是您在第一个弹性项上有一个右自动边距:

#container {
    width: 500px;
    overflow: hidden;
    margin: 50px auto; <-- problem here; flex auto margins
    background: white;
}

基于 how auto margins work in a flex container

#container {
    width: 500px;
    overflow: hidden;
    margin: 50px 0; <-- remove the horizontal auto margins
    background: white;
}

https://jsfiddle.net/z8jte8sb/