Question

我这里有一个HTML。

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

<div class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
    <div class="image"><div>
</div>

在这里，我希望child1和image div成为一行，所以我把它放在带有内联flex属性的父div中。但与此同时，我不希望child1和child2 div成为同一行。有没有可用的解决方案？

Answer 1

一种方法是在Flex容器上启用wrap。

然后将div.child2显示为最后一个弹性项目（order: 1）并通过设置足够大的宽度强制它换行。

您可以根据需要调整宽度。

＆＃13;

.parent {
  display: flex;
  flex-wrap: wrap;
}

.child1, .image {
   flex: 0 0 50%;
}

.child2 {
  flex: 0 0 100%;
  order: 1;
}

* { box-sizing: border-box; }

＆＃13;

<div class="parent">
  <div class="child1"></div>
  <div class="child2"></div>
  <div class="image"></div>
</div>

＆＃13;

Answer 2

将您的子元素放入行

.row { height:100px; overflow hidden;} // assuiming 100px is height of a child
.row > .children { height:100px; float:left;}

或者假设所有div都是相同的大小oyu可以包含每对div [1] [2] [3] [4]并将它们浮动到任何你想要的地方。

Answer 3

使用弹性盒，我能看到的最有效的方法就是：

＆＃13;

.parent {
  display: inline-flex;
  flex-wrap: wrap;
}

.child1,
.child2,
.image {
  flex-grow: 1;
  flex-basis: 50%;
}

.child2 {
  order: 1;
}


/*DEMO STYLES ONLY*/

.parent {
  height: 6em;
  width: 18em;
  background: rgba(90, 90, 90, .2)
}

.parent>div {
  height: 2.5em;
  outline: 1px solid red;
}

[class] {
  position: relative;
}

[class]::after {
  color: rgba(65, 65, 65, .8);
  content: attr(class);
  position: absolute;
  bottom: 0;
  right: 0;
}

＆＃13;

<div class="parent">
  <div class="child1"></div>
  <div class="child2"></div>
  <div class="image"><div>
 </div>

＆＃13;

值得注意的属性是

flex-wrap允许您拥有多行
order允许您将项目放在 start 的灵活订购内容中（其他任何项目都不会order，因此它们会保留在原来的位置）
flex-basis告诉项目他们应该在什么时候开始成长
flex-grow这是可选的，但如果你选择它，第二行的项目将填满所有可用空间

如何使inline-flex不影响其中一个孩子

3 个答案: