center multiple panels with flexbox

Question

I currently have a set of panels that while in full screen a centered correctly, when they are at a small resolution, they are not. Basically I have a container with around 7 panels in it:

<div class"container">
    <div class="panel"></div>
    <div class="panel"></div>
    <div class="panel"></div>
    <div class="panel"></div>
    <div class="panel"></div>
    <div class="panel"></div>
    <div class="panel"></div>
</div>

I have created a code pen to show what it looks like in full screen: https://codepen.io/r3plica/pen/XemvyW?editors=0100

and in a small resolution (i.e. mobile) it looks like this: https://codepen.io/r3plica/pen/eGJOJN?editors=0100

I have made the background colour pink on the second codepen. I would like the items centering in the second pen without affecting the way it looks in a large resultion.

Does anyone know how I can achieve this?

Related if not Duplicate - https://stackoverflow.com/questions/32802202/how-to-center-a-flex-container-but-left-align-flex-items — Paulie_D, Sep 18 '17 at 10:59
It's not a duplicate, their layout they require is not the same as mine — r3plica, Sep 18 '17 at 13:37
Hence I used "Related". This issues are essentially the same though. — Paulie_D, Sep 18 '17 at 13:38
they are not though, he can solve his using flexbox. I can't — r3plica, Sep 18 '17 at 15:21

score 1 · Accepted Answer · answered Sep 18 '17 at 13:36

Ok, I managed this:

https://codepen.io/r3plica/pen/OxMyPL?editors=0100#0

All I did was get rid of the flexbox on the container of the panels and updated the persona-panels to use margins with calc like this:

.persona-panels {
    > div {
        .panel {
            vertical-align: top;
            display: inline-block;
            margin: 7.5px calc((100% - #{$persona-panel-width}) / 2);

            @include large-width {
                margin: 7.5px;
            }
        }
    }
}

H.W. Sanden · Answer 2 · 2017-09-18T12:54:11.917

There is a div with class ng-scope inside the flex-container. It blocks the code from being effective/working. Remove that from the html or make that your flex container. This is what your code actually looks like:

<div class="container">
   <div class="ng-scope DELETE THIS DIV">
      <div class="panel"></div>
      <div class="panel"></div>
      <div class="panel"></div>
      <div class="panel"></div>
      <div class="panel"></div>
      <div class="panel"></div>
      <div class="panel"></div>
   </div>
</div>

And in the css remove the inline-block from line 222 and it will center. Then add flex-flow: row wrap to .persona-panels.

score -1 · Answer 3 · answered Sep 18 '17 at 11:09

Changing the display property on the panels is messing it up.

Flexbox's display property works differently in that it changes the children too, children then become flex items.

According to this answer, though, it's more practical to just use inline-block.

score -1 · Answer 4 · answered Sep 18 '17 at 12:02

-1

You have to remove property this property from .panel. then it will work fine

display-inline-block

answered Sep 18 '17 at 12:02

Chander Shoor

566
1
4
8

no it won't because it will just force them all into 1 column – r3plica Sep 18 '17 at 12:29
This solution is not going to work. It destroys the layout for the full screen. Secondly, it would not be `display-inline-block`, but `display: inline-block`. – Binarus Sep 18 '17 at 12:34
The original poster has given links to his code in his original question. – Binarus Sep 20 '17 at 05:45

center multiple panels with flexbox

4 Answers4