CODEWITHSUNDEEP
cssflexbox
Pierre HUBERT
Pierre HUBERT

Reputation: 531

Display:inline-block and display:flex at the same time

Is there a way for a <div> tag to hold the properties display: inline-block; and display: flex;at the same time ?

I would like to have the rule display: inline-block; for the position of the division itself and the rule display: flex; to organize the childs of this tag.

In the following hierarchy, I would like to append the two rules for the divisions with the class "child", but I could not find a way to achieve it :

<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>

Thank you in advance,

Upvotes: 8

Views: 11665

Answers (1)

Jeroen W
Jeroen W

Reputation: 872

Use display: inline-flex instead.

Like so:

<style>
.child {
   display: inline-flex;
}
</style>

It makes the flex container display inline, but preserves the flex layout of it's children.

Upvotes: 14

Related Questions