同时使用display:inline-block和display:flex的效果

Question

同时使用display:inline-block和display:flex的效果

6

有没有一种方法让<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>

Thank you in advance,

- Pierre HUBERT

父元素使用 display:flex 呢？ - deEr.

我认为这不会奏效，因为孩子们被分成了几行和列。 - Pierre HUBERT

2

也许 display: inline-flex 是你正在寻找的？ - Gerard

1

就像已经写的那样，display: inline-flex 是你要寻找的行为。 - VXp

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jeroen W · Accepted Answer

使用 display: inline-flex 替代。

像这样：

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

它使弹性容器显示为内联元素，但保留其子级的弹性布局。