How to center block of inline-blocks?

前端未结

关注

 2  994

有刺的猬 2020-12-04 01:14

How do I make the green box (.b) tight around its contents so that I can horizontally center it?

2条回答

一个人的身影 (楼主)

2020-12-04 01:27

Here is a solution that will not make the .b to be smaller in order to fit all the .c but it will make the .c to be stretched a litte in order to avoid having the white spaces.

UPDATE

I added some media queries to make sure all the elements always stay the same width. Of course this is based on exact values, so for a generic solution we may need to include calc or some variable.

* {
  box-sizing: border-box;
}

.c {
  background-color: blue;
  margin: 5px;
  height: 100px;
  min-width: 80px;
  flex: 1;
  display: inline-block;
}

.a {
  border: 1px solid red;
  display: flex;
}

.b {
  margin: 0 auto;
  border: 1px solid green;
  display: flex;
  flex-wrap: wrap;
}

.b:after {
  content: "";
  flex: 1;
}

@media all and (max-width:1110px) {
  .b:after {
    margin: 5px;
  }
}

@media all and (min-width:1020px) and (max-width:1110px) {
  .b:after {
    flex: 10;
  }
}

@media all and (min-width:930px) and (max-width:1020px) {
  .b:after {
    flex: 7.75;
  }
}

@media all and (min-width:840px) and (max-width:930px) {
  .b:after {
    flex: 5.5;
  }
}

@media all and (min-width:750px) and (max-width:840px) {
  .b:after {
    flex: 3.25;
  }
}

@media all and (min-width:570px) and (max-width:660px) {
  .b:after {
    flex: 4.33;
  }
}

body {
  padding: 50px;
}

0 讨论(0)

查看其它2个回答

热议问题