skip to Main Content

That’s interesting, why I can’t align items with static px width inside a flex container. If I don’t give the child blocks the static width of 100 % they are centered in the center of the parent . But when I’m using the width of 100ps the child blocks are moved to the start position.

.wrapper {
 display: flex;
 justify-content: space-around;
}
.item {
  width: 20%;
}
.item__inner {
  width: 100px;   /* Beacuse of the static width I can't align the inner items inside the item wrapper .item*/
  height: 100px;
  border-radius: 50%;
  background: red;
}
<div class="wrapper">
  <div class="item">
    <div class="item__inner">
    </div>
  </div>
  <div class="item">
  </div>
</div>

2

Answers


  1. Well if the case is to align div with class item__inner to the center, you just need to add margin auto: like this:

    .wrapper {
     display: flex;
     justify-content: space-around;
    }
    .item {
      width: 20%;
      background-color: orange;
    }
    .item__inner {
      margin: 0 auto;
      width: 100px;   /* Beacuse of the static width I can't align the inner items inside the item wrapper .item */
      height: 100px;
      border-radius: 50%;
      background: red;
    }
    
    Login or Signup to reply.
  2. To center item__inner inside .item, can add the following to .item:

    .item {
      width: 30%;
      display: flex;
      justify-content: center;
    }
    

    I also changed the width from 20% to 30%, because otherwise there’s not enough space for the circle.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search