css - Display:inline-block和display:flex同时

Question

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

先感谢您，

Answer 1

请改用display: inline-flex。

像这样：

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

它使flex容器内联显示，但保留其子代的flex布局。