10

Yes, this has been asked before, and I have seen it work numerous times in online examples, but I must be missing something in my attempt:

main.wrap {
  display: flex;
  flex-wrap: wrap;
  /*flex-direction: row; the default */
  gap: 10%;
}
<main class="wrap">
  <div class="column">
    <h3>Wrap with gap</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt imperdiet justo, ac rhoncus urna sollicitudin vitae. Duis eu dolor eu dui tempor cursus. </p>
  </div>

  <div class="sidebar">
    <h3>Sidebar</h3>
    <p>Nullam posuere commodo quam eget ultricies. Duis luctus, mauris at iaculis tempor. </p>
  </div>
</main>

Works fine with the default of no-wrap

See it here: https://codepen.io/breadwild/pen/abWMQPB

Thoughts?

2
  • 1
    It works if you set size on element or with px, rem, em.. instead of % You can read about gap here Commented Aug 13, 2021 at 16:44
  • I'm sorry, I'd didn't make myself clear. I was under the impression that the wrapped (top version) could work like the no-wrap version. The only change between the two is wrap to no-wrap. The sidebar should be to the right in both versions, with the gap separating the two divs.
    – breadwild
    Commented Aug 13, 2021 at 19:02

4 Answers 4

2

Look, If you put flex on the parent element, it will be applied on only its children elements, not on their grand children elements. The marked two portion are the children here. flex-gap has been created in between them. enter image description here

If you want to add gaps between h3, p tags- you need either to add padding/margin or to add flex on its parent element. Hopefully it helps. Feel free to ask further questions.

1
  • Again, sorry for the confusion. I want the two divs: column and sidebar, arranged horizontally, with the sidebar on the right until a media query wraps it. The issue is the gap between the two divs is zero when using the flex-wrap: wrap
    – breadwild
    Commented Aug 14, 2021 at 16:07
0

You're trying to apply a % gap, and that unit is relative to its parent. In this case, the parent has no defined height, so this is happening:

Problem from Devtools

You can define a height or use the viewport unit for height vh, like this:

Posible solution

0

Sorry for not understanding your question perfectly. Please replace your CSS file with the given code. I guess you are asking for it. If not, please keep asking questions-

.wrap {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 6%;
}
.column{
  flex-basis: 47%;
}
.sidebar{
  flex-basis: 47%;
}

0

In your wrap case your column and sidebar are wrapping into 2 rows, so there isn't a column-gap appearing as each occupies the whole width. (And there isn't a row-gap either between the 2 rows because - as mentioned in another answer - you're using a % value of a parent which doesn't have any height).

With wrap you're allowing the elements to wrap into new rows. So the browser looks at the each element, sees that there's enough text to occupy the whole line, so it allows that and places the elements on 2 rows.

With nowrap you're telling the browser to fit these 2 elements onto the same line. So the browser will do that, choosing a width for each element which makes them of a similar height, and allows the 10% gap in between.

So to get the same effect for wrap you need to constrain both elements so that they don't occupy the whole line, and don't then result in the wrap into 2 rows being applied.

You can do this by adding this CSS, for example:

.column {
  max-width: 60%;
}
.sidebar {
  max-width: 30%;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.