弹性项目之间的神秘空间

Question

我在 flex 容器中有两个 div，第二个与页面的右侧对齐，而不是在第一个旁边。

由于flex-flow的默认值是row而justify-content的默认值是flex-start ，我希望第二个 div 与第一个对齐。

我在这里做错了什么？

我的滚动幻灯片是否以某种方式干扰了带有文本的 div 的位置？

 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>

Answer 1

问题是你在第一个弹性项目上有一个正确的自动边距：

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

根据auto边距在 flex 容器中的工作方式，这会自动将其同级推到尽可能远的地方。 试试这个：

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

https://jsfiddle.net/z8jte8sb/