私は外側があります flexbox 2つの内側 divs 互いに隣り合って 150x150 サイズ。パディングは 10px。私が使う flex-wrap: wrap; そのため、ウィンドウが両方にフィットしない場合は、2番目のウィンドウが最初のウィンドウの下に移動するようにします。
<!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 どちらか一方が他方の側にあったり下側にあったりしても、それらの間には2つありますか？私は内側のdivにいくつかのバリエーションを試しました margin-left そして margin-top 誰もが水平に働くかもしれないが、垂直に勝っていないので、すべては私の結果を与えなかった...
回答：
回答№1は25pxのパディングを親に追加し、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/
回答№2の場合は1
あなたは次のようにすることができます：
.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>回答№3の場合は0
メディアクエリを使用できます。
<!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>