flexbox - justify content does not work when used with percentage width

Question

Why is that? I was under the impression you can do so with a percent width?

See the example below:

.amphead__branding-center {
    width: 55%;
    height: 3.5rem;
    margin: 0 auto;
    border-radius: 15px;
    background-color: green;
  }
  
.amphead__center-logo {
    width: 30%;
    display: flex;
    flex-direction: column;
    flex-basis: auto;
    align-content: center;
    justify-content: center;
    font-family: serif;
    background-color: #000;
    color: #fff;
  }
  .engineering {
    font-family: 'Source Sans Pro', sans-serif;
    background-color: $main-amp-color;
    color: lighten($grate-color, 2%);
  }

<div class="amphead__branding-center">
      <div class="amphead__center-logo">
        <span>Main header</span>
        <span class="engineering">Sub Header</span>
      </div>
    </div>

Howcome "main header" and "sub header" aren't in the center?

These resources suggest what I'm doing should work

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Flexbox: center horizontally and vertically

What's the problem?

score 1 · Answer 1 · answered Jul 02 '19 at 13:07

Nothing to do with percentage lengths.

You want to horizontally center amphead__center-logo, then apply the centering properties to the parent.

Add this to your code:

.amphead__branding-center {
    display: flex;
    justify-content: center;
  }

.amphead__branding-center {
  width: 55%;
  height: 3.5rem;
  margin: 0 auto;
  border-radius: 15px;
  background-color: green;
  /* new */
  display: flex;
  justify-content: center;
}

.amphead__center-logo {
  width: 30%;
  display: flex;
  flex-direction: column;
  flex-basis: auto;
  align-content: center;
  justify-content: center;
  font-family: serif;
  background-color: #000;
  color: #fff;
}

.engineering {
  font-family: 'Source Sans Pro', sans-serif;
  background-color: $main-amp-color;
  color: lighten($grate-color, 2%);
}

<div class="amphead__branding-center">
  <div class="amphead__center-logo">
    <span>Main header</span>
    <span class="engineering">Sub Header</span>
  </div>
</div>

Just to add a bit, as the other answer mentioned, adding a margin 0 auto to the logo container could also center it, as another option — IvanS95, Jul 02 '19 at 13:09
@IvanS95, yes. `justify-content` works from the flex container level. `auto` margins work from the flex item level. — Michael Benjamin, Jul 02 '19 at 13:10

score 0 · Answer 2 · answered Jul 02 '19 at 13:12

You need to apply display: flex, justify-content, flex-direction and/or align-items to the parent.

Also because you use flex-direction: column you need to use align-items to center horizontally.

.amphead__branding-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 55%;
    height: 3.5rem;
    margin: 0 auto;
    border-radius: 15px;
    background-color: green;
  }
  
.amphead__center-logo {
    width: 30%;
    flex-basis: auto;
    font-family: serif;
    background-color: #000;
    color: #fff;
  }
  .engineering {
    font-family: 'Source Sans Pro', sans-serif;
    background-color: $main-amp-color;
    color: lighten($grate-color, 2%);
  }

<div class="amphead__branding-center">
      <div class="amphead__center-logo">
        <span>Main header</span>
        <span class="engineering">Sub Header</span>
      </div>
    </div>

flexbox - justify content does not work when used with percentage width

2 Answers2