爲什麼沒有在彈性項目之間設置邊距？

我最近開始學習flexbox。我試圖在.parent容器內的div之間設置邊距，但不顯示邊距。此外，如果我給任何一個.child div的寬度值，它們仍然擴展到覆蓋整個窗口。我哪裏錯了？爲什麼沒有在彈性項目之間設置邊距？

body { 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 
.parent { 
 
\t display: flex; 
 
\t height: 100px; 
 
\t border: 2px solid black; 
 
\t justify-content: space-between; 
 
} 
 

 
.child { 
 
\t flex: 1; 
 
\t width: 32%; 
 
\t margin: auto; 
 
\t height: 100px; 
 
\t border: 2px solid blue; 
 
\t background: green; 
 

 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>Flexbox</title> 
 
\t <link rel="stylesheet" href="style.css"> 
 
</head> 
 
<body> 
 
\t <div class="parent"> 
 
\t \t <div class="child"></div> 
 
\t \t <div class="child"></div> 
 
\t \t <div class="child"></div> 
 
\t </div> 
 
</body> 
 
</html>

來源

2016-09-29 Br34th7aking

你有一個鏈接到網站？ – Heady

這是因爲您在'.child' div中指定'flex：1;'而發生的。 –

利潤率對我有用。至於寬度，你可以使用'max-width' – pol

您需要刪除flex: 1;，這是造成div的來調整，以填補空白。

body { 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 
.parent { 
 
\t display: flex; 
 
\t height: 100px; 
 
\t border: 2px solid black; 
 
\t justify-content: space-between; 
 
} 
 

 
.child { 
 
\t width: 32%; 
 
\t margin: auto; 
 
\t height: 100px; 
 
\t border: 2px solid blue; 
 
\t background: green; 
 

 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>Flexbox</title> 
 
\t <link rel="stylesheet" href="style.css"> 
 
</head> 
 
<body> 
 
\t <div class="parent"> 
 
\t \t <div class="child"></div> 
 
\t \t <div class="child"></div> 
 
\t \t <div class="child"></div> 
 
\t </div> 
 
</body> 
 
</html>

來源

2016-09-29 19:25:44

「利潤」，在實現Flexbox將要通過你的容器的寬度主要是控制而不是由指定的利潤率。使用flex-basis來確定您的容器的寬度，並刪除flex: 1。這就是導致你的容器擴展的原因。並記住它是「彈性」框。它意味着流動性，所以試圖爲諸如邊距之類的事情調整靜態值來達到目的。

提示：調試時使用背景顏色而不使用邊框。邊界影響寬度，可能會導致麻煩。乾杯。

body { 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 
.parent { 
 
\t display: flex; 
 
\t height: 100px; 
 
\t justify-content: space-between; 
 
    background-color: blue; 
 
} 
 

 
.child { 
 
\t flex-basis: 20%; 
 
\t height: 100px; 
 
\t background: green; 
 

 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>Flexbox</title> 
 
\t <link rel="stylesheet" href="style.css"> 
 
</head> 
 
<body> 
 
\t <div class="parent"> 
 
\t \t <div class="child"></div> 
 
\t \t <div class="child"></div> 
 
\t \t <div class="child"></div> 
 
\t </div> 
 
</body> 
 
</html>

來源

2016-09-29 19:26:40

亨特特納如果您刪除表示flex: 1它會奏效。該屬性設置項目相對於其他項目的長度。

MDN Docs

body { 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 
.parent { 
 
\t display: flex; 
 
\t height: 100px; 
 
\t border: 2px solid black; 
 
\t justify-content: space-between; 
 
} 
 

 
.child { 
 
\t width: 32%; 
 
\t margin: auto; 
 
\t height: 100px; 
 
\t border: 2px solid blue; 
 
\t background: green; 
 

 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>Flexbox</title> 
 
\t <link rel="stylesheet" href="style.css"> 
 
</head> 
 
<body> 
 
\t <div class="parent"> 
 
\t \t <div class="child"></div> 
 
\t \t <div class="child"></div> 
 
\t \t <div class="child"></div> 
 
\t </div> 
 
</body> 
 
</html>

來源

2016-09-29 19:30:33 ZeroWorks

爲什麼沒有在彈性項目之間設置邊距？

回答

相關問題