How can I apply margin depending on text wrapping?-CodePudding

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  style="width: 140px;">
  <div >TEXT
    <div >123</div>TEXT
  </div>
</div>

<div  style="width: 50px;">
  <div >TEXT
    <div >123</div>TEXT
  </div>
</div>

CodePudding user response：

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  style="width: 100px;">
  <div >TEXT</div>
  <div >123</div>
</div>

<div  style="width: 50px;">
  <div >TEXT</div>
  <div >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  style="width: 100px;">
  <div >TEXT</div>
  <div >123</div>
</div>

<div  style="width: 50px;">
  <div >TEXT</div>
  <div >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 >
  <div >TEXT</div>
  <div >123</div>
  <div >TEXT</div>
  <div >123</div>
</div>

<div >
  <div >TEXT</div>
  <div >123</div>
  <div >TEXT</div>
  <div >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;
  }
}

CodePudding user response：

If you can change your HTML and CSS as below, it is achievable:

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

.block .text {
  margin-right: 10px;
}

.block .number {
  display: inline-block;
  background: blue;
  color: white;
}

<div  style="width: 100px;">
  <div >TEXT</div>
  <div >123</div>
</div>

<div  style="width: 50px;">
  <div >TEXT</div>
  <div >123</div>
</div>