[SOLVED] Fixing line-height or gap issues with flex container and artificial line break

Fixing line-height or gap issues with flex container and artificial line break

I am using a flex container and an artificial line break to break words when desired. I never realized that it was causing extra gap space between lines.

As you can see in the example, the space between lines after the line break after the word HOW is taller than the other distances between lines.

The parent div could be any size at any time in both the width and height, and the children will always be vertically centered and could left or right or center justified, so unless I am missing something Flex seems to be ideal.

.outer-container {
height:200px;
width:200px;
}

.flex-container {
  display:flex;
  gap:.2em;
  font-size:20px;
  width:100%;
height:100%;
  flex-wrap:wrap;
  white-space:pre-line;
  align-content:center;
  justify-content:center;
  
}

.flex-item {
  background:red;
  padding:2px;
}

.linebreak {
  display:flex;
   
    flex-direction: column; 
     flex-basis: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div class="outer-container">
<div class="flex-container">
  <div class="flex-item">Hi</div>
  <div class="flex-item">There</div>
  <div class="flex-item">How</div>
  <div class="linebreak"></div>
  <div class="flex-item">Are</div>
   <div class="flex-item">You</div>
     <div class="flex-item">Everyone</div>
       <div class="flex-item">Here</div>
         <div class="flex-item">is Fine</div>
</div>
</div>

Solution

You could remove the grid gap and put .1em margin on the items.

.flex-container {
  display:flex;
  font-size:20px;
  width:200px;
  flex-wrap:wrap;
  white-space:pre-line;
}

.flex-item {
  background:red;
  padding:2px;
  margin: .1em;
}

.linebreak {
  display:flex;
   
    flex-direction: column; 
     flex-basis: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div class="flex-container">
  <div class="flex-item">Hi</div>
  <div class="flex-item">There</div>
  <div class="flex-item">How</div>
  <div class="linebreak"></div>
  <div class="flex-item">Are</div>
   <div class="flex-item">You</div>
     <div class="flex-item">Everyone</div>
       <div class="flex-item">Here</div>
         <div class="flex-item">is Fine</div>
</div>