CSS Flexbox空間與包裝之間divs

我有一個外部flexbox與兩個內部divs彼此相鄰，都爲150x150大小。填充是10px。我使用flex-wrap: wrap;，這樣如果窗口不適合他們兩個，第二個去低於第一個。CSS Flexbox空間與包裝之間divs

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.big { 
    background-color: red; 
    display: flex; 
    padding: 10px; 
    flex-wrap: wrap; 
} 
.small1 { 
    background-color: yellow; 
    width: 150px; 
    height: 150px; 
} 
.small2 { 
    background-color: blue; 
    width: 150px; 
    height: 150px; 
} 
</style> 
</head> 
<body> 

<div class="big"> 
    <div class="small1">Test1</div> 
    <div class="small2">Test2</div> 
</div> 

</body> 
</html>

我怎樣才能添加其他10 pixels space他們兩人之間，即使一個旁邊或下面？我試圖在內部div的幾個變化與margin-left和margin-top但都沒有給我的結果，因爲一個可以水平工作，但不會垂直...

來源

2017-10-05 Oti Na Nai

Horizontaly垂直，10px當黃色div結束，並開始藍色。 –

添加5像素的填充父和5px的邊際給孩子們。

.big { 
    background-color: red; 
    display: flex; 
    padding: 5px; 
    flex-wrap: wrap; 
} 
.small1 { 
    background-color: yellow; 
    margin: 5px; 
    width: 150px; 
    height: 150px; 
} 
.small2 { 
    background-color: blue; 
    margin: 5px; 
    width: 150px; 
    height: 150px; 
}

例子：https://jsfiddle.net/3htv9tgy/

來源

2017-10-05 07:13:27 MJL

你可以這樣說：

.big { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    padding: 5px; 
 
    background: red; 
 
} 
 

 
.big > div { 
 
    margin: 5px; 
 
} 
 

 
.small1 { 
 
    width: 150px; 
 
    height: 150px; 
 
    background: yellow; 
 
} 
 

 
.small2 { 
 
    width: 150px; 
 
    height: 150px; 
 
    background: blue; 
 
}

<div class="big"> 
 
    <div class="small1">Test1</div> 
 
    <div class="small2">Test2</div> 
 
</div>

來源

2017-10-05 07:15:21 VXp

您可以使用媒體查詢。

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.big { 
    background-color: red; 
    display: flex; 
    padding: 10px; 
    flex-wrap: wrap; 
} 
.small1 { 
    background-color: yellow; 
    width: 150px; 
    height: 150px; 
} 
.small2 { 
    background-color: blue; 
    width: 150px; 
    height: 150px; 
} 
@media (max-width:345px) { 
    .small2 { 
     margin-top:10px; 
     margin-left:0px; 
    } 
    .small1 
    { 
     margin-right:10px; 
    } 

    @media (max-width:200px){ 
     .small1 
     { 
     margin-right:0px; 
     } 
    } 
</style> 
</head> 
<body> 

<div class="big"> 
    <div class="small1">Test1</div> 
    <div class="small2">Test2</div> 
</div> 

</body> 
</html>

來源

2017-10-05 07:46:04

CSS Flexbox空間與包裝之間divs

回答

相關問題