Wrapping text in flex-item?

[GailS]

Could anyone help me wrap the text within the flex-item?

        <ul class="flex-container">
          <li class="flex-item">Lorem ipsum dolor sit amet</li>
          <li class="flex-item">Lorem ipsum</li>
          <li class="flex-item">Lorem ipsum</li>
          <li class="flex-item">Lorem ipsum</li>
          <li class="flex-item">Lorem ipsum</li>
        </ul>

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 0;
  margin: 0;
  list-style: none;
}

.flex-item {
  background: grey;
  padding: 5px;
  width: 100px;
  height: 150px;
  margin-top: 10px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 1em;
  text-align: center;
}

[PaulOB]

The text is wrapping but you just set the line-height to bigger than the box -size.

Remove this to see the text wrap.

/* line-height: 150px;*/

If you are trying to centre the text vertically then use flex centering.

.flex-item {
  background: grey;
  padding: 5px;
  width: 100px;
  min-height: 150px;
  /* line-height: 150px;*/
  color: white;
  font-weight: bold;
  font-size: 1em;
  text-align: center;
  display: flex;
  align-items: center;
}

[ladans37]

@PaulOB wouldn’t line-height just cause the paragraphs to space out? Not seeing how it would prevent text from wrapping. Just wondering.

[PaulOB]

@ladans37

Not seeing how it would prevent text from wrapping. Just wondering.

It doesn’t.

As I said above the text is wrapping but you just can’t see it because it wraps out of the box and in white.

Here it is in red:

[ladans37]

Ok cool. This one looks better

[GailS]

Thanks a lot @PaulOB. I removed the line-height and added the lines you suggested to center the text vertically.

Here is the code I’m going with…

        <div class="flex-container">
          <div class="flex-item">Lorem ipsum dolor sit amet, consectetur adipiscing</div>
          <div class="flex-item">Lorem ipsum</div>
          <div class="flex-item">Lorem ipsum</div>
          <div class="flex-item">Lorem ipsum</div>
          <div class="flex-item">Lorem ipsum</div>
        </div>

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 0;
  margin: 0;
  /*list-style: none; -- removed this line*/
}

.flex-item {
  background: grey;
  padding: 5px;
  width: 100px;
  height: 150px;
  margin-top: 10px;
  /*line-height: 150px; -- removed this line*/
  color: white;
  font-weight: bold;
  font-size: 1em;
  text-align: center;
  display: flex; /* added this line*/
  align-items: center; /* added this line*/
}