Question

我有一个带有两个弹性项目的弹性容器：

<div class="container">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>

如果小于100px

，项目会浮动到容器的可用空间

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  outline: 1px solid black;
}

.left {
  min-width: 40px;
  flex-grow: 1;
}

.right {
  min-width: 60px;
  flex-grow: 1;
}

现在，我使用display：inline-block：

向左侧项添加一些元素

<div class="floater"></div>
<div class="floater"></div>
<div class="floater"></div>
<div class="floater"></div>

.floater {
  width: 15px;
  height: 10px;
  display: inline-block;
 }

但是现在，浮动元素会导致弹性项目换行。

编辑：我试图实现的目标：

.container宽度＆lt; 100px =＆gt; .right位于.left
.container width＆gt; = 100px =＆gt; .right和.left是并排的
.left的内容不会影响左侧的宽度

所以，我希望.left和.right仅包含小.containers（即窗口/浏览器很小）。

我创建了一个带有100px容器的fiddle来演示问题。

感谢。

Answer 1

使用媒体查询。

@media ( max-width: 100px ) {
    .container {
        flex-direction: column;
    }
}

上述规则告诉flex容器在flex-direction: row宽度为100px或更小时从.container（默认设置）切换到垂直对齐。

Revised Demo（我在演示中使用max-width: 500px进行说明）。

根据您的总体目标，您的Flex容器上的flex-wrap: wrap和width: 100px规则可能没有必要。

Answer 2

从flex-wrap: wrap;移除.container将根据您的预期进行。

.container {
  display: flex;
  justify-content: space-between;
  width: 100px;
  outline: 1px solid black;
}

<强> Fiddle Link

Flex项内的内联块会导致换行

2 个答案: