Как растянуть div на всю ширину родительского flex div блока?

Question

[Rokis]

Здравствуйте.

Не могу растянуть flex div на всю ширину родителя в %. Никакие свойства flex не работают на этот блок. С данной технологией познакомился недавно.

HTML:

<div class="content">
<div class="circ"><a>test</a></div>
</div>

CSS:

.content{ display: flex;
    flex-wrap: wrap}
.circ{display: block;
    text-align: center;}

Стили для .content (которые указаны выше) добавляются в мобильной версии. Соответственно блок .circ как дочерний становится flex блоком, но на него не работают вообще никакие свойства flex. Подскажите, что можно сделать в данной ситуации? Нужно просто расположить блок .circ по центру родителя без использования конкретных значений width.

Comments

[Сергей delphinpro]

но на него не работают вообще никакие свойства flex.

ну да, рассказывайте =))

[Rokis]

Я проверил прежде чем писать. Серьёзно не работают. Никаких изменений не происходит.

Answer 1

[alex]

#1

.content {
  justify-content: center;
}

#2

.circ {
  margin-left: auto;
  margin-right: auto;
}

Comments

[Rokis]

Гениально! Спасибо за решение проблемы. Я думал у меня после этого вся верстка поедет (много других элементов), но вроде нормально встало. А как сделать тоже самое, но конкретно с одним элементом, чтобы других это не затрагивало?

[alex]

Rokis: скиньте разметку, или ссылку на сайт

[Rokis]

Alex: https://jsfiddle.net/cezcz135/2/

Вот самое основное.

[alex]

Rokis: тогда попробуйте вот так:

.content {
  flex-direction: column;
}

.circ {
  align-self: center;
}

[Rokis]

Alex: Спасибо большое!

Оказалось достаточным заменить в блоке .content:

flex-wrap: wrap;
justify-content: center;

На:
flex-direction: column;
И блок .center стал располагаться на всю ширину как надо.