Как центрировать div по горизонтали с помощью display = flex и flex-direction = row; - PullRequest
0 голосов
/ 28 декабря 2018

У меня есть содержимое div с дисплеем в таком же направлении, как и в строкеВ этом div у меня есть два других div, один из которых содержит форму, а другой содержит 2 изображения, также содержащиеся в div.Я установил второе направление гибкого деления в качестве столбца и пытаюсь центрировать все деления в середине страницы.Прошу прощения, если я объяснил это плохо, но, надеюсь, следующий код будет иметь смысл!

#content {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

#col1 {
  width: 60%;
  border-radius: 5px;
}

#col2 {
  background: rgba(150, 143, 150, 0);
  width: 50%;
  height: auto;
  border-radius: 5px;
}

#col3 {
  background: rgba(150, 143, 150, 0);
  width: 50%;
  height: auto;
}
<div id='content'>
  <div id='col1'>
    My form is here
  </div>
  <div style="flex-direction:column">
    <div id='col2'>
      <img id='side1' src='https://via.placeholder.com/120'>
    </div>

    <div id='col3'>
      <img id='side2' src='https://via.placeholder.com/120'>
    </div>
  </div>
</div>

Заранее благодарен за любую помощь

ПРИМЕЧАНИЕ = Я теперь исправил это, изменив = ширину col2 и col3 с 50% до59vh.Не уверен, почему это не понравилось%.

1 Ответ

0 голосов
/ 02 января 2019

Вы должны использовать этот код

    #content{
        background-color: #d2cbd2; /*  for example */
        width: 100%;
        height: auto;
        display: flex;
        flex-flow: row;
        justify-content: space-between;
        align-items: center;
    }
    #col2{
        display: flex;
        flex-flow:wrap  row;
    }
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
      <div id='content'>
            <div id="col1">
                My form is here
            </div>
            <div id="col2">
                <div>
                  <img src="i2.jpg">
                </div>
                <div>
                    <img src="i2.jpg">
                </div>
            </div>
      </div>

</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...