Question

我有一个外部flexbox，其中两个内部divs彼此相邻，两个150x150大小。填充为10px。我使用flex-wrap: wrap;，这样如果窗口不适合它们，那么第二个窗口将低于第一个窗口。

.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;
}

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

如何在它们之间添加另外两个10 pixels space，即使一个是下一个还是另一个下面？我尝试使用margin-left和margin-top对内部div进行了多处修改，但都没有给出我的结果，因为一个可以水平工作但不会垂直...

Answer 1

向父母添加5px的填充，并向子女添加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/

Answer 2

你可以这样做：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您可以使用媒体查询。

<!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>

包含

3 个答案: