包装时是否可以更改项目的顺序？

debugcn 发表于 Dev

维特拉

我正在尝试创建一个网站的一部分，包括3个部分（我们称其为A，B，C），其中A和B彼此相邻（对齐以接触容器的相对侧），而在它们下面是C ，但是当A和B在容器中彼此不匹配时，B会包裹在C下方，而不是在A和C之间。

A，B和C都具有伸缩组件，并且可以通过其他元素来调整容器的大小，因此它们的大小都是未知的。这意味着使用@media是不可能的。

预期结果：
当A和B彼此适合时：当它们不适合时：用flexbox或grid可以实现吗？据我所知：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>flexbox black magic</title>
</head>
<body>
    <div style="width:50%; border:4px solid blue; margin:8px; display: flex; justify-content: space-between; flex-wrap: wrap;">
        <div style="width: 100px; height: 60px; border: 4px solid red; margin:8px;">a</div>
        <div style="width: 70px; height: 30px; border: 4px solid green; margin:8px;">b</div>
        <div style="width: 100%">
            <div style="width: 100%; max-width: 240px; height: 100px; border: 4px solid orange; margin:8px;">c</div>
        </div>
    </div>
</body>
</html>

但这不仅会以错误的顺序包装元素，还会使C伸出容器。

陪同Afif

这是一个使用float的想法，是的float。调整蓝色容器的大小，然后查看结果：

.box {
  width: 50%;
  border: 4px solid blue;
  margin: 8px;
  text-align: justify;
  font-size:0; /* this will make sure the pseudo element won't have any size */
  overflow: auto;
  resize: horizontal;
}
.box > * {
  font-size:initial; /* we reset the font for child element */
  margin:8px;
  box-sizing:border-box;
}
/* the below is used with text-align:justify to have the correct alignment on wrap */
.box::before {
  content:"";
  display:inline-block;
}
.box::after {
  content:"";
  display:inline-block;
  width:100%;
}
/**/
.a {
  max-width: 100px;
  width: calc(100% - 16px);
  height: 60px;
  float:left; /* we float a */
}

.b {
  width: 70px;
  height: 30px;
  display: inline-block;
}

.c {
  height: 100px;
  width: calc(100% - 16px);
  max-width: 240px;
  float:left; /* and we float c */
  clear:left; /* don't forget this to make "c" always below "a" */
}

<div class="box">
  <div class="a" style="border: 4px solid red;">a</div>
  <div class="c" style="border: 4px solid orange;">c</div>
  <div class="b" style="border: 4px solid green;">b</div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。