Flexbox использовать как контейнер?

Question

[imha]

Добрый день!
Вопрос, наверно простой, может-ли флексбокс быть одновременно флексконтейнером. Т.е., есть ли возможность не вставлять в флексбокс новый фл.контейнер.
И есть, в этом случае подводные камни?

Comments

[Ankhena]

Опишите, пожалуйста, разницу между флексбоксом и флексконтейнером?

Если вы имели в виду, может ли флекс элемент и сам иметь display: flex, то да, конечно. Что именно у вас не получилось?

[imha]

<code lang="html">

</code><div class="my-flex-cont">
 <div class="my-flex-box">Блок 1</div>
 <div class="my-flex-box">Блок 2</div>
 <div class="my-flex-box">Блок 3</div>
</div>

.my-flex-cont {
display: flex;
height: 100px;
}
.my-flex-box {
margin: 5px;
padding: 5px;
flex: 0 1 auto;
}
Поясню:
Мне не нужно блокировать отступы.
Вопрос в другом, можно ли использовать (придать свойства)

<code lang="html"> <div class="my-flex-box">Блок 3</div></code> как контейнер (придать свойства) <code><code lang="html"><div class="my-flex-cont"> ...</div>.</code>
Или только через вложение:<code><code lang="html">
<div class="my-flex-box">
<div class="my-flex-cont">Блок ....</div>
</div></code>
Если да, т то как, и какие подводные камни

Answer 1

[Михаил Р.]

может-ли флексбокс быть одновременно флексконтейнером

Может для чего? CSS и законом не запрещено.

Т.е., есть ли возможность не вставлять в флексбокс новый фл.контейнер

Можете разобрать пример Bootstrap flex сетки. Там, для балансировки горизонтальных отступов используется вариант с двойным контейнером: .container (padding-x) > .row (negative margin-x) > .col (padding-x).

Сделать горизонтальные отступы с .flex > .col (с одним контейнером) так же, как в Grid layot можно лишь динамическим высчитыванием этих отступов, использую css calc {}

Comments

[Ankhena]

Если не нужны совсем динозавры, то во флексах уже прилично работает gap. И нет нужды в костылях с отрицательными margin.