Flexbox顯示器是否會更改邊距寬度？

Question

當我使用flexbox（當前版本或顯示器：flex;）時，我的利潤似乎增加了一倍，我無法弄清楚原因。頁面各節之間的所有其他頁邊距顯示爲10px，因爲它們已設置，但用於flexbox內容的邊距顯示爲大約兩倍。我已經嘗試將包裝div（#output）設置爲margin：0px;和填充：0px;但這沒有任何作用。這是一個flexbox「功能」？或者是我的CSS的邊距/填充設置有問題嗎？

的HTML：

<div id="all_content"> 
    <section id='search_box'> 
     <h1>Auto Primer</h1> 
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
    </section> 

    <div id="output"> 
     <nav id='user_input'> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     </nav> 

     <section id='gene_selected'> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     </section> 
    </div> 

    <section id='primers'> 
     <h2>Primers</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
    </section> 

    <section id='how_to'> 
     <h2>How To Use Auto Primer</h2> 
     <p><span id="form_out"></span></p> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
    </section> 
</div> 

的CSS：

div#all_content { 
    width: 1200px; 
    margin: 0 auto; 
    padding: 0px; 
} 

section#search_box { 
    padding: 10px; 
    margin: 10px; 
    background: #ebf4fb; 
    border:2px solid #b7ddf2; 
    border-radius: 15px; 
    -moz-border-radius: 15px; 
    -webkit-border-radius: 15px; 
} 

div#output { 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    width: 100%; 
} 

nav#user_input { 
    background: #ebf4fb; 
    border: 2px solid #b7ddf2; 
    width: 275px; 
    padding: 10px; 
    margin: 10px; 
    border-radius: 15px; 
    -moz-border-radius: 15px; 
    -webkit-border-radius: 15px; 
} 

section#gene_selected { 
    -webkit-box-flex: 1; 
    -moz-box-flex: 1; 
    -webkit-flex: 1; 
    -ms-flex: 1; 
    flex: 1; 
    padding: 10px; 
    margin: 10px; 
    background: #ebf4fb; 
    border: 2px solid #b7ddf2; 
    border-radius: 15px; 
    -moz-border-radius: 15px; 
    -webkit-border-radius: 15px; 
} 
section#primers { 
    padding: 10px; 
    margin: 10px; 
    background: #ebf4fb; 
    border: 2px solid #b7ddf2; 
    border-radius: 15px; 
    -moz-border-radius: 15px; 
    -webkit-border-radius: 15px; 
} 

section#how_to { 
    padding: 10px; 
    margin: 10px; 
    background: #ebf4fb; 
    border: 2px solid #b7ddf2; 
    border-radius: 15px; 
    -moz-border-radius: 15px; 
    -webkit-border-radius: 15px; 
} 

編輯： 我設法獲得利潤由給人留下撓性元件看起來相同： 保證金：0像素5px 0px 10px; 和右側的彈性元素： margin：0px 10px 0px 5px; 而不是保證金：10px;因爲頁面上的所有其他元素都使用。雖然這個工作，我仍然有點茫然，爲什麼flexbox這樣做。

編輯： 下面是一個jsfiddle展示問題：fiddle。進一步更新和簡化。

Answer 1

問題是，邊緣柔性部分應用了兩次邊距。您可以通過在並排元素之間正確分配邊距來解決此問題。

基於CSS3定義：
http://www.w3.org/TR/css3-flexbox/#item-margins

相鄰柔性的項目利潤率不塌陷。自動邊距可吸收相應尺寸中的額外空間，並可用於對齊並將相鄰的柔性物品分開;請參閱與'自動'邊距對齊。

這就是你的情況發生的情況，並排彈性項目的邊距不會摺疊，但是在其他彈性項目上，它們會摺疊，因此邊距不會在這些彈性項目上應用兩次。