Margin-Top Only When the Flex Item Is Wrapped

margin-top only when the flex item is wrapped

You can add some margin-top to both flex items, and a negative margin-top of the same amount to the flex container.

This way, the negative margin of the flex container will neutralize the margin of the flex items at the first line, but not the margin of the items that wrapped to other lines.

.container {
  margin-top: -30px;
}
.item-big, .item-small {
  margin-top: 30px;
}

.container {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-around;

  margin-top: -30px;

}

.item-big, .item-small {

  margin-top: 30px;

  background: red;

}

.item-big {

  background: blue;

  width: 300px;

}

<div class="container">

   <div class="item-big">

      FIRST BIG ELEM

   </div>

   <div class="item-small">

      SECOND SMALL ELEM

   </div>

</div>

Removing margin from flex items when they wrap

Update in late 2021

Now the gap property also works with Flexbox (on newer browser versions).

* {
  margin: 0;
  padding: 0;
}

html, body {
  box-sizing: border-box;
}

.container {
  width: 600px;
  margin: 0 auto;
  margin-top: 25px;
  border: 1px solid;
  padding: 5px;
}

.tags {
  list-style-type: none;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 5px;                          /* added */
}

.tag {
  padding: 5px;
  background-color: #76FF03;
  /* margin: 0 5px 5px;                 removed */
}

<div class="container">
  <ul class="tags">
    <li class="tag item-1">Tag Item 1</li>
    <li class="tag item-2">Tag Item 2</li>
    <li class="tag item-3">Tag Item 3</li>
    <li class="tag item-4">Tag Item 4</li>
    <li class="tag item-5">Tag Item 5</li>
    <li class="tag item-6">Tag Item 6</li>
    <li class="tag item-7">Tag Item 7</li>
    <li class="tag item-8">Tag Item 8</li>
    <li class="tag item-9">Tag Item 9</li>
    <li class="tag item-10">Tag Item 10</li>
    <li class="tag item-11">Tag Item 11</li>
    <li class="tag item-12">Tag Item 12</li>
    <li class="tag item-13">Tag Item 13</li>
    <li class="tag item-14">Tag Item 14</li>
    <li class="tag item-15">Tag Item 15</li>
    <li class="tag item-16">Tag Item 16</li>
  </ul>
</div>

Better way to set distance between flexbox items

Flexbox doesn't have collapsing margins.
Flexbox doesn't have anything akin to border-spacing for tables (edit: CSS property gap fulfills this role in newer browsers, Can I use)

Therefore achieving what you are asking for is a bit more difficult.

In my experience, the "cleanest" way that doesn't use :first-child/:last-child and works without any modification on flex-wrap:wrap is to set padding:5px on the container and margin:5px on the children. That will produce a 10px gap between each child and between each child and their parent.

Demo

.upper {
  margin: 30px;
  display: flex;
  flex-direction: row;
  width: 300px;
  height: 80px;
  border: 1px red solid;

  padding: 5px; /* this */
}

.upper > div {
  flex: 1 1 auto;
  border: 1px red solid;
  text-align: center;

  margin: 5px;  /* and that, will result in a 10px gap */
}

.upper.mc /* multicol test */ {
  flex-direction: column;
  flex-wrap: wrap;
  width: 200px;
  height: 200px;
}

<div class="upper">
  <div>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa<br/>aaa</div>
  <div>aaa<br/>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa</div>
</div>

<div class="upper mc">
  <div>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa<br/>aaa</div>
  <div>aaa<br/>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa</div>
</div>

Remove margin-right when flex-wrap is wraping elements with pure CSS

  .wrapper {

    display: flex;

    flex-wrap: wrap;

    flex-direction: row;

    border: 1px solid black;

    width: 768px;

  }

  .wrapper__item {

    flex: 1 0 45%;

    /*   width: 330px; */

    height: 160px;

    margin: 0 36px 18px 0;

    background-color: lightcoral;

  }

  .wrapper div:nth-child(2n) {

    margin-right: 0;

  }

  <div class="wrapper">

    <div class="wrapper__item">Item</div>

    <div class="wrapper__item">Item</div>

    <div class="wrapper__item">Item</div>

    <div class="wrapper__item">Item</div>

    <div class="wrapper__item">Item</div>

    <div class="wrapper__item">Item</div>

</div>

flex column and wrap will let flex-item overflow

Another solution as per your expecation:

* {
  margin: 0;
  padding: 0;
}

.out {
  width: 600px;
  height: 200px;
  border: 1px solid #ccc;
  padding: 20px;
  margin: 50px auto;
  font-family: Verdana;
  display: flex;
}

img {
  /* margin-bottom: 20px; */
  margin-right: 20px;
}

p {
  line-height: 1.6;
  overflow-wrap: break-word;
  margin-left: -200px;
  margin-top: auto;
  margin-bottom: auto;
}

h1 {
  position: relative;
  white-space: nowrap;
}

p::before {
  content: "";
  width: 100%;
}

<div class="out">
  <img src="https://picsum.photos/id/230/200/200" alt="Sample Image">
  <h1>This is Title</h1>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta iure iusto cupiditate sequi aperiam, nostrum optio ipsam dicta modi officiis eligendi vel. Dignissimos delectus exercitationem nemo. Enim id sed corrupti!</p>
</div>

margin with flex wrap

You are setting the basis to 50% then when you add the margin it push the next element since can't fit side by side anymore. You may want to let the items grow and avoid the basis:

.collage-item {
  flex: 1 0 auto;
}

Jsfiddle Demo

How to set margin only on all but first and last items in wrapping Flexbox

Wrap your list in a container div, give the list negative margins to offset the list item margins, and hide the overflow in the container:

.c {

  overflow: hidden;

}

.a {

  margin: -5px;

}

/* your original CSS */

.a {

  display: flex;

  flex-wrap: wrap;

  flex-direction: row;

  background: yellow;

}

.b {

  width: 50px;

  margin: 5px;

  height: 50px;

  display: flex;

  align-items: center;

  justify-content: center;

  background: red;

}

<div class='c'>

  <div class='a'>

    <div class='b'>1</div>

    <div class='b'>1</div>

    <div class='b'>1</div>

    <div class='b'>1</div>

    <div class='b'>1</div>

    <div class='b'>1</div>

    <div class='b'>1</div>

    <div class='b'>1</div>

    <div class='b'>1</div>

    <div class='b'>1</div>

    <div class='b'>1</div>

    <div class='b'>1</div>

    <div class='b'>1</div>

    <div class='b'>1</div>

    <div class='b'>1</div>

    <div class='b'>1</div>

    <div class='b'>1</div>

    <div class='b'>1</div>

    <div class='b'>1</div>

    <div class='b'>1</div>

    <div class='b'>1</div>

    <div class='b'>1</div>

    <div class='b'>1</div>

    <div class='b'>1</div>

    <div class='b'>1</div>

    <div class='b'>1</div>

    <div class='b'>1</div>

    <div class='b'>1</div>

    <div class='b'>1</div>

    <div class='b'>1</div>

  </div>

</div>

Margin-Top Only When the Flex Item Is Wrapped