如何将两个弹性盒容器彼此相邻设置

Question

我试图将一个弹性盒容器放置在彼此旁边，以便它们并排放置，如下所示：

这是我到目前为止所拥有的：

.container {
  display: flex;
  align-items: flex-start;
  flex-direction: row;
  justify-content: flex-start;
  border: 3px dashed black;
  width: 750px;
  height: 750px;
}

.container1 {
  display: flex;
  align-items: flex-start;
  flex-direction: row;
  justify-content: flex-start;
  border: 3px dashed black;
  width: 1500px;
  height: 50px;
}

.container2 {
  display: flex;
  align-items: flex-start;
  flex-direction: row;
  justify-content: flex-start;
  border: 3px dashed black;
  width: 750px;
  height: 750px;
}

<div class="container1"></div>
<div class="container"></div>
<div class="container2"></div>

Answer 1

您需要添加一个外部容器，然后添加显示柔性和柔性行

看这里：

https://codepen.io/lasercake/pen/yrwNVx

  <div class="container1"></div>
     <div class="outer-container">
       <div class="container"></div>
       <div class="container2"></div>
    </div>

并且 CSS 需要更新为：

   .container { 
      border: 3px dashed black; 
      width: 750px; 
      height: 750px;
   }
  .outer-container{
      display: flex;  
      flex-direction: row;
  }

  .container2 {
      border: 3px dashed black; 
      width: 750px; 
      height: 750px;
  }

这是因为 Flexbox 更多的是关于包含元素而不是单个元素。在这种情况下，外部容器正在格式化子元素以在行中均匀显示。

编辑：这是一个使用 Flexbox 参考的好网站：https://css-tricks.com/snippets/css/a-guide-to-flexbox/