CODEWITHSUNDEEP
htmlcssflexbox
Serafim Nikolaev
Serafim Nikolaev

Reputation: 29

how to center blocks after flex-wrap?

After flex-wrap wraps the block to the next line, I need to center it, but I can't. How to center the third block? Here is an example from the codepen where I can’t

.block3 {
    align-self: center;
}

Codepen

Upvotes: 1

Views: 393

Answers (1)

Harrison
Harrison

Reputation: 2357

You could opt for justify-content: space-between;:

.head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 10px;
}

.block {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;
  background-color: red;
}
<div class="head">
  <div class="block">1</div>
  <div class="block">2</div>
  <div class="block">3</div>
</div>

I've also added in a gap: 10px to ensure that the blocks never touch when next to each other or when wrapping.

Upvotes: 4

Related Questions