Question 252204 in CSS Question posted in
Some basic documentation can be found here.

Css – 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>
Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    Sounds a bit overkill for Flebox

    .container {
  font-size: 20px;
  line-height: 1.5;
  width: 200px;
}

.container * {
  background: red;
  padding: 2px;
}
    <div class="container">
  <span>Hi</span>
  <span>There</span>
  <span>How</span>
  <br>
  <span>Are</span>
  <span>You</span>
  <span>Everyone</span>
  <span>Here</span>
  <span>is Fine</span>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search