html - Is there a way to change the order of items when wrapping?

Question

Welcome To Ask or Share your Answers For Others

html - Is there a way to change the order of items when wrapping?

posted Oct 7, 2021 in Technique[技术] by 深蓝 (71.8m points)

html - Is there a way to change the order of items when wrapping?

I'm trying to create a part of a website, with 3 parts (let's call them A, B, C), where A and B are beside each other (aligned to touch opposite sides of a container), and below them is C, but when A, and B don't fit beside each other in the container, B wraps below C instead of between A and C.

A, B and C all have expanding-collapsing components, and the container can be resized by other elements, so all their sizes are unknown. This means that using @media is out of the question.

Expected result:
When A and B fit beside each other:

When they don't:

Is this possible to achieve with flexbox or grid?

This is as far as I got:

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

question from:https://stackoverflow.com/questions/65907161/allow-flex-wrapping-under-other-content

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-06T19:13:09+0000

Here is an idea using float, yes float. Resize the blue container and see the result:

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

Categories

html - Is there a way to change the order of items when wrapping?

html - Is there a way to change the order of items when wrapping?

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags