Flexbox列多个孩子

Question

使用弹性盒，容器内只有四个div ... 我无法处理......

我堆叠在上面......

.container {
  display: flex;
  flex-flow: column nowrap;
}

.x-1 {
  background: yellow;
  height: 200px;
  width: 200px;
  margin: 10px 10px 0 0;
}

.x-2 {
  background: yellow;
  height: 200px;
  width: 200px;
  margin: 10px 10px 0 0;
}

.x-3 {
  background: yellow;
  height: 200px;
  width: 200px;
  margin: 10px 10px 0 0;
}

.x-4 {
  background: red;
  height: 700px;
  width: 800;
  margin: 10px 10px 0 0;
}

<div class="container">
  <div class="x-1"></div>
  <div class="x-2"></div>
  <div class="x-3"></div>
  <div class="x-4"></div>
</div>

修改

我将从头开始。我想获得与图像相同的效果。我插入下面的代码。

.container {
  display: flex;
  padding: 0 100px;
}

.left {
  display: flex;
  flex-direction: column;
}

.box-1 {
  background: yellow;
  height: 200px;
  width: 200px;
  margin: 10px 0;
}

.box-2 {
  background: yellow;
  height: 200px;
  width: 200px;
  margin: 10px 0;
}

.box-3 {
  background: yellow;
  height: 200px;
  width: 200px;
  margin: 10px 0;
}

.box-4 {
  width: 100%;
  background: red;
  height: 800px;
  margin: 10px 10px;
}

<div class="container">
  <div class="left">
    <div class="box-1"></div>
    <div class="box-2"></div>
    <div class="box-3"></div>
  </div>
  <div class="box-4"></div>
</div>

Answer 1

您可以将黄色框包装在自己的容器中......

＆＃13;

＆＃13;

.container {
  display: flex;
}

.left {
  display: flex;
  flex-direction: column;
}

.left div[class^='x'] {
  background: yellow;
  height: 200px;
  width: 200px;
  margin: 10px 10px 0 0;
}

.x-4 {
  background: red;
  height: 700px;
  width: 800px;
  margin: 10px 10px 0 0;
}

＆＃13;

<div class="container">
  <div class="left">
    <div class="x-1"></div>
    <div class="x-2"></div>
    <div class="x-3"></div>
  </div>
  <div class="x-4"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

你只需要为代码添加div

＆＃13;

＆＃13;

.container {
  display: flex;
}

.x-1 {
  background: yellow;
  height: 200px;
  width: 200px;
  margin: 10px 10px 0 0;
}

.x-2 {
  background: yellow;
  height: 200px;
  width: 200px;
  margin: 10px 10px 0 0;
}

.x-3 {
  background: yellow;
  height: 200px;
  width: 200px;
  margin: 10px 10px 0 0;
}

.x-4 {
  background: red;
  height: 700px;
  width: 800px;
  margin: 10px 10px 0 0;
}

＆＃13;

<div class="container">
    <div>
          <div class="x-1"></div>
          <div class="x-2"></div>
          <div class="x-3"></div>
     </div>
     <div>
          <div class="x-4"></div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以在此处使用CSS网格布局。这是演示，我删除了多余的.left块和重写样式。这甚至可以在IE10 +中使用：

＆＃13;

＆＃13;

.container {
  /* taking margins into account, so 90px */
  padding: 0 90px;
  display: -ms-grid;
  display: grid;
  /* taking margins into account, so 220px */
  -ms-grid-columns: 220px 1fr;
  grid-template-columns: 220px 1fr;
  -ms-grid-rows: auto auto 1fr;
  grid-template-rows: auto auto 1fr;
}

.box-1,
.box-2,
.box-3,
.box-4 {
  margin: 10px;
}

.box-1,
.box-2,
.box-3 {
  background: yellow;
  height: 200px;
}

.box-2 {
  -ms-grid-row: 2;
  grid-row: 2;
  -ms-grid-column: 1;
  grid-column: 1;
}

.box-3 {
  -ms-grid-row: 3;
  grid-row: 3;
  -ms-grid-column: 1;
  grid-column: 1;
}

.box-4 {
  background: red;
  height: 800px;
  -ms-grid-row: 1;
  -ms-grid-row-span: 3;
  grid-row: 1 / span 3;
  -ms-grid-column: 2;
  grid-column: 2;
}

@media only screen and (max-width: 900px) {
  .container {
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    -ms-grid-rows: 1fr auto auto;
    grid-template-rows: 1fr auto auto;
  }
  
  .box-1 {
    -ms-grid-row: 2;
    grid-row: 2;
    -ms-grid-column: 1;
    grid-column: 1;
  }
  
  .box-2 {
    -ms-grid-row: 2;
    grid-row: 2;
    -ms-grid-column: 2;
    grid-column: 2;
  }
  
  .box-3 {
    -ms-grid-row: 3;
    grid-row: 3;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-column: 1 / span 2;
  }
  
  .box-4 {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1 / span 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-column: 1 / span 2;
  }
}

@media only screen and (max-width: 700px) {
  .container {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    -ms-grid-rows: 1fr auto auto auto;
    grid-template-rows: 1fr auto auto auto;
  }
  
  .box-1,
  .box-2,
  .box-3,
  .box-4 {
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-column: 1 / span 1;
  }
  
  .box-1 {
    -ms-grid-row: 2;
    grid-row: 2;
  }
  
  .box-2 {
    -ms-grid-row: 3;
    grid-row: 3;
  }
  
  .box-3 {
    -ms-grid-row: 4;
    grid-row: 4;
  }
  
  .box-4 {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1 / span 1;
  }
}

＆＃13;

<div class="container">
  <div class="box-1"></div>
  <div class="box-2"></div>
  <div class="box-3"></div>
  <div class="box-4"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

以下是jsFiddle来测试调整大小。

Answer 4

我改写了样式以实现适应性，灵活性和可维护性：

.container {
  display: flex;
  /* taking margins into account, so 90px */
  padding: 0 90px;
}

.left {
  display: flex;
  flex-direction: column;
}

.box-1,
.box-2,
.box-3,
.box-4 {
  margin: 10px;
}

.box-1,
.box-2,
.box-3 {
  background: yellow;
  width: 200px;
  height: 200px;
}

.box-4 {
  background: red;
  flex: 1;
  height: 800px;
}

@media only screen and (max-width: 900px) {
  .container {
    flex-direction: column-reverse;
  }
  
  .left {
    flex-direction: row;
    flex-wrap: wrap;
  }
  
  .box-1,
  .box-2 {
    width: auto;
    flex: 1 0 0;
  }
  
  .box-3 {
    width: auto;
    flex: 0 1 100%;
  }
}

@media only screen and (max-width: 700px) {
  .container {
    flex-direction: column-reverse;
  }
  
  .left {
    flex-direction: column;
    flex-wrap: nowrap;
  }
    
  .box-1,
  .box-2,
  .box-3,
  .box-4 {
    width: auto;
    flex: 1 0 auto;
  }
}

<div class="container">
  <div class="left">
    <div class="box-1"></div>
    <div class="box-2"></div>
    <div class="box-3"></div>
  </div>
  <div class="box-4"></div>
</div>

以下是jsFiddle来测试调整大小。