CSS - differences between horizontal and vertical flexboxes

Question

I am using display: flex to center an item in its container. It works when I use justify-content and align-items (method 1).

In the documentation, all flexbox concepts seem to have both horizontal and vertical versions. However, using flexbox to center items doesn't seem to work when I swap the axes on everything (method 2). What is the asymmetry?

<table>
<tr>
  <th>METHOD1</th>
  <th>METHOD2</th>
</tr>
<tr>
  <td><div class="outer center-method-1"><div class="inner"></div></td>
  <td><div class="outer center-method-2"><div class="inner"></div></td>
</tr>
</table>

<style>

  table {
    border-spacing: 10px;
  }

  .outer {
    background-color: #ddd;
    width:  100px;
    height: 100px;
  }

  .inner {
    background-color: #f00;
    width:   20px;
    height:  20px;
  }

  .center-method-1 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .center-method-2 {
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-items: center;
  }

</style>

You have mixed up the properties in `.center-method-2` for `align-items` and `justify-content`. Fix that and it will work fine. — TylerH, Dec 11 '22 at 22:03
@TylerH I'm not sure what you mean by "mixed up"... I intentionally changed each horizontal property to its vertical analogue and vice versa. If I didn't do the transposition properly, then please be more specific on how it should be done. (For example, what is the vertical analogue of `justify-content`?) — personal_cloud, Dec 11 '22 at 22:08
`justify-content` is not axis-specific; it applies based on the axial direction you assign by using `row` or `column` (or their reverse counterparts). You "mixed up" the properties there by thinking that the flexbox properties `align-items` and `justify-content` were somehow "compound" properties that could have their second halves swapped (which is not how they or any CSS properties work). — TylerH, Dec 12 '22 at 15:26
@TylerH "justify-content is not axis-specific; it applies based on the axial direction" Aahhh!!! THAT was my misunderstanding. Thank you. (It's a bit of a stretch to call this a "typo" though) — personal_cloud, Dec 18 '22 at 17:52
The close banner is a bit confusing--the 'typo' reason also includes "a problem that cannot be reproduced" and is for cases where the resolution is 'less likely to be of use to future readers. In the case of `justify-content`, any tutorial/learning page that discusses that property should mention that it is not axis-specific... so learning about it should usually not result in this question. — TylerH, Dec 19 '22 at 16:32
Likewise, it's highly unusual to expect that a compound CSS property ("word-word" format) could be partially substituted with another compound property. I don't think I've ever seen anyone else try that before in all my time on the site or writing CSS. Hence, "less likely to be of use to future readers" applies there, as well. — TylerH, Dec 19 '22 at 16:32
@TylerH "it's highly unusual to expect that a compound CSS property ("word-word" format) could be partially substituted with another compound property." That's not what I did. I merely expected the axis-specific properties for grids to work the same way for flex when they would be applicable. In hindsight it was wrong, but that doesn't mean it can't be a common mistake. — personal_cloud, Dec 20 '22 at 18:05

score 2 · Accepted Answer · answered Dec 11 '22 at 22:28

There are a lot of problems in your code...

div is not a self-closing tag like meta. Code like <div class=inner /> must be written as <div class="inner"></div>.
Classes and IDs must always be enclosed in quotes. Something like class=inner is incorrect.
justify-items will be ignored in flexbox layouts (see: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items)
align-content has no effect on single line flexbox layouts (see: https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)
You have a misunderstanding of how justify-content && justify-items and align-content && align-items work. For this reason you mix the properties in center-method-1 and center-method-2.

If your only goal is to center the child in the flexbox container regardless of the main-axis, then you can do it this way:

.outer {
    background-color: #ddd;
    width:  100px;
    height: 100px;
}

.inner {
    background-color: #f00;
    width:   20px;
    height:  20px;
}

.center-method-1 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.center-method-2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

<div class="outer center-method-1">
    <div class="inner"></div>
</div>

<br><br><br><br>

<div class="outer center-method-2">
    <div class="inner"></div>
</div>

Thank you, it was items 3-4 I was interested in. I must say, HTML has some arbitrary subtleties in it. (1-2 are now fixed in the question but had no effect. 5 goes without saying, given items 3-4.) — personal_cloud, Dec 11 '22 at 22:44
For centering with flexbox, here is the canonical question: https://stackoverflow.com/questions/19026884/flexbox-center-horizontally-and-vertically — TylerH, Dec 12 '22 at 15:26

CSS - differences between horizontal and vertical flexboxes

1 Answers1

Linked