彈性項目之間的神秘空間

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/