Html 纯CSS解决方案，将3个项目的中间部分向下推

好的，我的情况如下：

我使用flexbox一行有3个div：

1 | 2 | 3

div

1

的宽度是固定的。Div

2

“flexes”用于占用

1

和

3

之间的可用空间，但应最小为其内容的大小（各不相同）。div

3

需要是它包含的内容的宽度，这是不同的

因此，我：

1 (fixed with) | 2 (flexes, but minimal width should be the width of the content) | 3 (width of content)

我想要实现的是，如果包含所有三个div的容器变得太小，无法满足每个div的最小宽度要求，那么中间部分（div

2

）被向下推。所以我得到：

1 | 3
-----
  2

我知道如何使用javascript实现这一点，但如果我事先不知道

2

和

3

的内容宽度，那么使用纯CSS解决方案是否可能实现这一点

这里有一个代码笔，它还没有达到我想要的效果，但可以作为一个起点来为您节省一些时间：

注意：我知道如何获得

1 | 2 | 3

或

 1 | 3
 -----
   2

---

通过更改

顺序

属性。但是，我不能为开关设置固定的断点，因为我不知道内容的宽度，而且内容也各不相同……

如果添加

宽度：100%

并最后一次订购（

订购：3

），则可以强制第二个子项（

child2

）在新行中，如下所示：

.container{
显示器：flex；
柔性包装：包装；
}
.container>div{
文本对齐：居中；
颜色：白色；
字体大小：粗体；
}
.container>div.child1{
宽度：150px；
背景色：红色；
顺序：1；
}
.container>div.child2{
背景颜色：蓝色；
顺序：3；
宽度：100%；
}
.container>div.child3{
背景颜色：绿色；
顺序：2；
}

1（固定宽度）
2（弯曲，但最小宽度应为内容的宽度）
3（内容宽度）

您只需添加一个媒体查询，查询您想要响应的大小即可。以下是600px宽度的示例：

@media (max-width: 600px) {
  .container > div.child1,
  .container > div.child3 {
    flex: 1 0 auto;
    width: auto;
  }
  .container > div.child2 {
    flex-basis: 100%;
    order: 4;
  }
}

---

这里是代码笔的分叉版本：

好了，这里是解决方案

<style>
.one, .two {
    width: 33.3%;
    float: left
}
.three {
    width: 33.3%;
    float: right
}
.one {
    background: #999;
}
.two {
    background: #060;
}
.three {
    background: #336;
}
@media (max-width: 768px) {
.two {
    width: 100%;
    float: none;
    clear: both;
}
}
</style>

.1、.2{
宽度：33.3%；
浮动：左
}
.三{
宽度：33.3%；
浮球：对
}
.一{
背景：#999；
}
.二{
背景:#060 ;；
}
.三{
背景:#336；
}
@介质（最大宽度：768px）{
.二{
宽度：100%；
浮动：无；
明确：两者皆有；
}
}

还有HTML

<div class="one">01</div>
<div class="three">03</div>
<div class="two">02</div>

01
03
02

您可以更改div的顺序，如1、3和2，以便使用css@AtifAzad不，因为如果它们在一行上，那么它们也将是

1 | 3 | 2

。我无法根据断点更改顺序，因为我不知道宽度。请检查下面的答案因为您不能使用媒体查询，答案是“否”，没有CSS Flexbox解决方案。CSS无法检测到溢出以更改顺序。是的。我已经玩了好几个小时了。。只能用JS来完成…我不能使用断点，因为我不知道必须打断的宽度，因为内容是可变的。是的，但这是一个固定的解决方案。现在，它不会在这两种场景之间切换。我不能使用媒体查询，因为我不知道内容的宽度。你可以使用div。我只使用随机宽度百分比。op希望第一个div的固定宽度为150px，也没有媒体查询。使用这个css希望它能帮助你------>.one、.two{float:left}.three{float:right}.one{background:#999；width:150px；}.two{背景：#060；}。三{背景：#336；}