Excluding child element from flex container

Question

<div class="container">
  <div class="image"><img /></div>
  <div class="image"><img /></div>
  <div class="text"></div>
</div>

I have this situation. I need to center two images into the container but i need to display the "text" in a new line under the two images. I did it with css

.container {
  display: flex;
  justify-content: center;
  align-content: center;
  flexwrap: wrap;
}

.image {
  display: inline-block
}

Text goes to new line but up to a certain resolution. How can exclude text from flex flow?

Duplicate - https://stackoverflow.com/questions/36470038/how-to-exclude-the-first-item-in-a-flexbox-wrap — Paulie_D, Oct 15 '18 at 16:04

Ori Drori · Answer 1 · 2018-10-15T15:58:28.953

Set the width of the text to 100%, and align the text to the center:

.container {
  display: flex;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
}

.text {
  width: 100%;
  text-align: center;
}

<div class="container">
  <div class="image"><img src="https://picsum.photos/120/80?1"></div>
  <div class="image"><img src="https://picsum.photos/120/80?2"></div>
  <div class="text">Text</div>
</div>

Excluding child element from flex container

1 Answers1