如何将两个flexbox容器彼此相邻设置

Question

我正在尝试将flexbox容器彼此相邻放置，以便它们可以并排放置，就像这样：

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

.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

您需要添加一个外部容器，然后添加display flex和flex行

查看此处：

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/

Answer 2

您需要一个带有justify-content: space-between的父级flex容器。