Display: inline-block и display: flex одновременно
Есть ли способ, чтобы тег <div> одновременно сохранял свойства display: inline-block; и display: flex;?
Я хотел бы иметь правило display: inline-block; для позиции самого подразделения и правило display: flex; для организации дочерних элементов этого тега.
В следующей иерархии я хотел бы добавить два правила для подразделений с классом «child», но я не смог найти способ добиться этого:
<div class = "parent">
<div class = "child">
<subchild1>
<subchild2>
...
</div>
<div class = "child">
<subchild1>
<subchild2>
...
</div>
...
</div>
<style type = "text/css">
.child {
display: inline-block;
display: flex;
}
</style>
Заранее спасибо,
Я не думаю, что это сработает, потому что дети разделены на несколько строк и столбцов.
может быть, display: inline-flex - это то, что вы ищете?
Как уже было написано, display: inline-flex - это то поведение, которое вы ищете.
Ответы 1
Вместо этого используйте display: inline-flex.
Вот так:
<style>
.child {
display: inline-flex;
}
</style>
Он делает отображение гибкого контейнера встроенным, но сохраняет гибкую компоновку его дочерних элементов.
Насчет
display:flexна родительском.