Как установить два контейнера 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

Вам нужно добавить внешний контейнер, а затем добавить дисплей 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.