0

Всем привет. Есть блок, которому присвоен флекс (ширина 620 пикселей). В нем есть три блока, первые два с ширинами 50% и становятся в строку, а последний должен перейти на следующую сторку и встать посередине. Не получается у меня. Что сделал:

&__visual {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    &__visual::nth-child(3) {
        flex-grow: 1;

Еще делал ширину третьего блока 100%, не хочет на середину вставать. Сохраняет ширину 310 пикселей и прижимается к левому краю.

Как его передвинуть в середину?

Заранее спасибо.

2 ответа 2

0

* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  background: #272727;
  color: white;
}

#wrapper {
  display: flex;
  width: 620px;
  height: 300px;
  flex-direction: row;
  flex-wrap: wrap;
}

.conteiner {
  margin: 1px;
  width: 100%;
  height: 50%;
  justify-content: center;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.content {
  width: 50%;
  margin: 1px;
  background: orange;
}
<div id="wrapper">
  <div class="conteiner">
    <div class="content">Первый </div>
    <div class="content">Второй</div>
  </div>
  <div class="conteiner">

    <div class="content">Третий</div>
  </div>
</div>

2
  • Благодарю за ответ, но этот вариант для планшетной верстки. Для мобильной блоки стоят друг над другом, а в верстке для компьютеров они выстаиваются в линию. Если первый и второй заключены в один блок, как ими манипулировать в дальнейшем? 13 ноя 2017 в 17:13
  • Я тебе показал вариант, ты должен понять логику... Если понял, то уже в @media определи стили так как тебе надо...
    – Air
    13 ноя 2017 в 17:28
0

Решение пришло.

    <div class="page-footer__visual">
        <div class="page-footer__item">
        </div>
        <div class="page-footer__item">
        </div>
        <div class="page-footer__item">
        </div>
     </div>

&__item:last-child {
  width: 100%;
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.