CODEWITHSUNDEEP
css
gator
gator

Reputation: 1

How to center a container on Flex?

How to center the .container so that the items on the small screen are left and .container to center.

My example https://codepen.io/zakhar_coder/pen/QWbQxdE?editors=1100

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

.item {
  width: 370px;
  height: 250px;
  background-color: #333;
  margin: 0 30px 30px 0;
}
<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>    
</div>

This is how items should look. In the photo, the block itself is not centered

this option of placing elements is not suitable for me

Upvotes: 0

Views: 67

Answers (1)

Diego Fortes
Diego Fortes

Reputation: 9790

You don't need flex for that. Give a max-width to the container and force its width to 100%. After that you can center it using margin: 0 auto;.

If you use justify-content: center; it will center only its content, not the container.

Example:

CSS

.container {
  display: flex;
  flex-wrap: wrap;  
  /* added code */
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
}

.item {
  height: 250px;
  background-color: #333;
  margin: 0 30px 30px 0;
  /* added code */
  max-width: 370px;
  width: 100%;
}

Click here for the Codepen sample.

Upvotes: 1

Related Questions