CODEWITHSUNDEEP
htmlcss
Vans
Vans

Reputation: 350

How can I apply margin depending on text wrapping?

Please tell me how can I make the margin-left of the .number block be only if there is no wrapping in the text block. In the first option, everything is OK, in the second, the indent is not needed.

.block {
  height: auto;
  background: grey;
  overflow: hidden;
  margin-bottom: 20px;
}

.block .text {
  display: flex;
  flex-wrap: wrap;
}

.block .text .number {
  background: blue;
  color: white;
  margin: 0px 10px;
}
<div class="block" style="width: 140px;">
  <div class="text">TEXT
    <div class="number">123</div>TEXT
  </div>
</div>

<div class="block" style="width: 50px;">
  <div class="text">TEXT
    <div class="number">123</div>TEXT
  </div>
</div>

Upvotes: 2

Views: 1488

Answers (1)

DreamTeK
DreamTeK

Reputation: 34187

I handle my flex wrapping by only using right margins.

.block {
  height: auto;
  background: grey;
  overflow: hidden;
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
}

.block > div {
  margin-right: 10px;
}

.block .number {
  background: blue;
  color: white;
}
<div class="block" style="width: 100px;">
  <div class="text">TEXT</div>
  <div class="number">123</div>
</div>

<div class="block" style="width: 50px;">
  <div class="text">TEXT</div>
  <div class="number">123</div>
</div>

You can optionally omit the final margin if you want a flush final block.

.block {
  height: auto;
  background: grey;
  overflow: hidden;
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
}

.block > div:not(:last-of-type) {
  margin-right: 10px;
}

.block .number {
  background: blue;
  color: white;
}
<div class="block" style="width: 100px;">
  <div class="text">TEXT</div>
  <div class="number">123</div>
</div>

<div class="block" style="width: 50px;">
  <div class="text">TEXT</div>
  <div class="number">123</div>
</div>

If you want to get a clean consistant bounding box no matter how manny flex items are in the container and no matter what size the width is you can use top left spacing on the container and bottom right on the children:

.block {
  height: auto;
  background: grey;
  overflow: hidden;
  margin-bottom: 20px;
  display: inline-flex;
  flex-wrap: wrap;
  padding: 10px 0 0 10px;
}

.block > div {
  margin: 0 10px 10px 0;
}

.block .number {
  background: blue;
  color: white;
}


.w50{
  max-width:50px;
}
<div class="block">
  <div class="text">TEXT</div>
  <div class="number">123</div>
  <div class="text">TEXT</div>
  <div class="number">123</div>
</div>

<div class="block w50">
  <div class="text">TEXT</div>
  <div class="number">123</div>
  <div class="text">TEXT</div>
  <div class="number">123</div>
</div>

Alternatively if your width is being determined by screen size then you can simple use a media query to alter the block once it wraps.

@media all and (max-width:100px) {
  .block .text .number {
    margin: 0;
  }
}

Upvotes: 1

Related Questions