Html - How to order and make space between items in flexbox?

blink
October 30, 2023
148 views
1 vote
2 Answers

Inside a container, we have 3 boxes (A, B, C). Currently, they all are in floating left positions. But we need them in a position where Box A will be the left, B will be the middle, and C will be the right side of the container. See the image below. How can we achieve this layout? (Please submit your answer with complete CSS. Use .container class name for container and .A .B .C for the boxes)

enter image description here

I fixed this by

.container {
  display: flex;
  justify-content: space-between;
}

.A {
  order: 1; /* Box A is on the left */
}

.B {
  order: 2; /* Box B is in the middle */
}

.C {
  order: 3; /* Box C is on the right */
}

Now I can not solve this.

On mobile layout, we need to swap the positions of these 3 boxes. We need Box C on the left side of the container and the Box A and Box B on the right side of the container. See the image above. How can we achieve this layout?

enter image description here

I have tried this code

@media (max-width: 767px) {
    .A, .B, .C {
        order: 0; /* Reset the order for all boxes */
    }

    .C {
        order: 1; /* Box C left */
    }

    .A, .B {
        order: 2; /* Box A right */
    }

    .B {
        order: 3; /* Box B right */
    }
}

But I am getting this

enter image description here

I am expecting this

enter image description here

My code here

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  color: white;
  font-size: 24px;
  margin: 4px;
}

.container {
    display: flex;
    justify-content: space-between;
}

.A {
    order: 1; /* Box A right */
}

.B {
    order: 2; /* Box B right */
}

.C {
    order: 3; /* Box C left */
}

@media (max-width: 767px) {
    .A, .B, .C {
        order: 0; /* Reset the order for all boxes */
    }

    .C {
        order: 1; /* Box C left */
    }

    .A, .B {
        order: 2; /* Box A right */
    }

    .B {
        order: 3; /* Box B right */
    }
}

<div class="container">
  <div class="box A">
    <span>A</span>
  </div>
  <div class="box B">
    <span>B</span>
  </div>
  <div class="box C">
    <span>C</span>
  </div>
</div>

Tags: css html

Answers

If you cannot change the HTML at all, I would add a margin-right to .C inside of the CSS media query. That way the other two boxes are pushed right:

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  color: white;
  font-size: 24px;
  margin: 4px;
}

.container {
    display: flex;
    gap: .25rem;
    justify-content: space-between;
}

.A {
    order: 1; /* Box A right */
}

.B {
    order: 2; /* Box B right */
}

.C {
    order: 3; /* Box C left */
}

@media (max-width: 767px) {
    .A, .B, .C {
        order: 0; /* Reset the order for all boxes */
    }

    .C {
        order: 1; /* Box C left */
        margin-right: auto;
    }

    .A, .B {
        order: 2; /* Box A right */
    }

    .B {
        order: 3; /* Box B right */
    }
}

<div class="container">
  <div class="box A">
    <span>A</span>
  </div>
  <div class="box B">
    <span>B</span>
  </div>
  <div class="box C">
    <span>C</span>
  </div>
</div>

You can play with the margin-right value (here it is auto, you can set it to eg 30%) and find the optimal spacing. But auto should do the best job;

However if you can change the HTML just a little bit, you could place the boxes inside of their own wrappers, and change the width of the wrapper of C to make it push the other boxes away. Making it take up 50% of the width would make the other two boxes be pushed to the other half of the screen:

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  color: white;
  font-size: 24px;
  margin: 4px;
}

.wrapper {
  outline: 2px solid hotpink;
}

.container {
    display: flex;
    justify-content: space-between;
}

.A {
    order: 1; /* Box A right */
}

.B {
    order: 2; /* Box B right */
}

.C {
    order: 3; /* Box C left */
}

@media (max-width: 767px) {
    .wrapper.a, .wrapper.b, .wrapper.c {
        order: 0; /* Reset the order for all boxes */
    }
  
  .wrapper.c {
      width: calc(50% - 4px);
    }

    .wrapper.c {
        order: 1; /* Box C left */
    }

    .wrapper.a, .wrapper.b {
        order: 2; /* Box A right */
    }

    .wrapper.b {
        order: 3; /* Box B right */
    }
}

<div class="container">
  
  <div class="wrapper a">
    <div class="box A">
      <span>A</span>
    </div>
  </div>
  
  <div class="wrapper b">
    <div class="box B">
      <span>B</span>
    </div>
  </div>
  
  <div class="wrapper c">
    <div class="box C">
      <span>C</span>
    </div>
  </div>
</div>

You can remove the outline of .wrapper as it is for testing purposes.

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  color: white;
  font-size: 24px;
  margin: 4px;
}

.container {
    display: flex;
    justify-content: space-between;
}

.A {
    order: 1; /* Box A right */
}

.B {
    order: 2; /* Box B right */
}

.C {
    order: 3; /* Box C left */
}

@media (max-width: 767px) {
    .container{
      gap: 25px;
    }

    .A, .B, .C {
        order: 0; /* Reset the order for all boxes */
    }

    .C {
        order: 1; /* Box C left */
    }

    .A, .B {
        order: 2; /* Box A right */
    }

    .B {
        order: 3; /* Box B right */
    }
    
    .A {
         margin-left: auto;
    }
}

<div class="container">
  <div class="box A">
    <span>A</span>
  </div>
  <div class="box B">
    <span>B</span>
  </div>
  <div class="box C">
    <span>C</span>
  </div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – How to order and make space between items in flexbox?

Answers